Dropdown: closing Dropdown inside a Modal by clicking Escape also closes Modal

[vkramskikh]

Bug Report

There is no way to prevent an event triggered by a Dropdown to affect a Modal containing it. Reproduces with Escape, Enter and other keys/events.

Steps

1. Create a search+selection Dropdown inside a Modal
2. Try start searching some value in the Dropdown and hit Escape to close it

Expected Result

Dropdown is closed, Modal is open

Actual Result

Modal is closed

Version

0.82.5

Testcase

https://codesandbox.io/s/9y8vzn4nvr

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[yuritoledo]

Hey @vkramskikh , try to add this on modal component: closeOnEscape={false}

It should work :)

[vkramskikh]

Sure it will work. But I want it to close on escape, just not when Dropdown is open and users want the Dropdown to close, not the Modal. Same applies to Enter key - users want to choose item in the Dropdown, not to submit the form in Modal

[jongsue]

I think you should handle escape event by props onClose something like this https://codesandbox.io/s/mjrlq64w8x

Modal could have any Component, So It can't decide to ignore which escape event come from

[fiskpatte]

@vkramskikh , I had a similar problem. If a certain input field inside my modal was visible, I wanted to close it with escape. Otherwise I wanted the modal to close as normal with escape. My solution was to use the modal as controlled component, then set closeOnEscape={false} on the modal, then inside of it I listened for the escape click event and if the input field was visible I just closed that one, otherwise I called the function I passed in that closed the modal.

<Modal 
    open={this.state.newGroupModalOpen}
    closeOnEscape={false}>
         <Modal.Content>
               <NewModifierGroup 
                      cancel={this.closeModifierModal.bind(this)}
               />
         </Modal.Content>                    
</Modal>

NewModifierGroup:

    
    componentDidMount(){
        document.addEventListener("keydown", this.catchEscape);
    }

    componentWillUnmount(){
        document.removeEventListener("keydown", this.catchEscape); 
    }

    catchEscape(e){        
        if(e.key == 'Escape'){
            if(this.state.showNewModifierInput){
                this.setState({
                    ...this.state,
                    showNewModifierInput: false
                })
            } else {
                this.props.cancel()
            }
        }        
    }

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[felixmosh]

I think that adding stopPropagation on the dropdown escape event will prevent this, no?

Here:https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L203

[mattjcl]

You can solve this by making the dropdown controlled and making closeOnEscape for the modal dependent on the dropdown state:

const [isDropdownOpen, setIsDropdownOpen] = useState(false);
...
<Modal closeOnEscape={!isDropdownOpen}>
    <Dropdown
         open={isDropdownOpen}
         onOpen={() => setIsDropdownOpen(true)}
         onClose={() => setIsDropdownOpen(false)}
     />
</Modal>

[jborensky-fhstp]

@mattjcl Your solution worked well for me, but...

I wouldn't recommend to use open={isDropdownOpen} inside your Dropdown-Component, because it makes it more difficult to use the state with multiple Dropdown-Elements on the same Modal. Also you don't need open=... to ensure that the Dropdown is opened when you select it.

Therefore, my working solution is:

const [isDropdownOpen, setIsDropdownOpen] = useState(false);
...
<Modal closeOnEscape={!isDropdownOpen}>
    <Dropdown
         onOpen={() => setIsDropdownOpen(true)}
         onClose={() => setIsDropdownOpen(false)}
     />
</Modal>