TextArea in Modal triggers Dropdown

[Obiwarn]

I have a TextArea in a Modal that is triggered by a Dropdown.Item. When I select the TextArea and then press Space the menu opens/closes in the back.

Repro: See the edited "Dropdown" example from https://react.semantic-ui.com/modules/dropdown/#types-dropdown

Just press "New", select the TextArea to open the Dropdown in the background (the BUG!).

import React from 'react'
import { Dropdown ,Modal,TextArea} from 'semantic-ui-react'

// TODO: This is missing functionality for sub-menu here from SUI core examples.
// The "Publish To Web" item should contain a sub-menu.

const DropdownExampleDropdown = () => (
  <Dropdown text='File'>
    <Dropdown.Menu>
     
     <Modal trigger={ <Dropdown.Item text='New' />}><TextArea></TextArea></Modal>
      <Dropdown.Item text='Open...' description='ctrl + o' />
      <Dropdown.Item text='Save as...' description='ctrl + s' />
      <Dropdown.Item text='Rename' description='ctrl + r' />
      <Dropdown.Item text='Make a copy' />
      <Dropdown.Item icon='folder' text='Move to folder' />
      <Dropdown.Item icon='trash' text='Move to trash' />
      <Dropdown.Divider />
      <Dropdown.Item text='Download As...' />
      <Dropdown.Item text='Publish To Web' />
      <Dropdown.Item text='E-mail Collaborators' />
    </Dropdown.Menu>
  </Dropdown>
)

export default DropdownExampleDropdown

[layershifter]

Hey @Obiwarn. What version of SUIR are you using? It was fixed by #4041 in 1.2.1.

[Obiwarn]

I tried this on the website, I thought it is running 1.2.1?
Here: https://react.semantic-ui.com/modules/dropdown/#types-dropdown

[layershifter]

Oh, good catch 👍 stopPropagation() should solve your issue:

const DropdownExampleDropdown = () => (
  <Dropdown text='File'>
    <Dropdown.Menu>
      <Modal
        onClick={(e) => e.stopPropagation()}
        trigger={<Dropdown.Item text='New' />}
      >
        <TextArea onKeyDown={(e) => e.stopPropagation()}></TextArea>
      </Modal>
      <Dropdown.Item text='Open...' description='ctrl + o' />
    </Dropdown.Menu>
  </Dropdown>
)

However, in this case it has more sense to use controlled Modal:

const DropdownExampleDropdown = () => {
  const [open, setOpen] = React.useState()

  return (
    <>
      <Dropdown text='File'>
        <Dropdown.Menu>
          <Dropdown.Item onClick={() => setOpen(true)} text='New' />
          <Dropdown.Item text='Open...' description='ctrl + o' />
        </Dropdown.Menu>
      </Dropdown>

      <Modal
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        open={open}
      >
        <TextArea></TextArea>
      </Modal>
    </>
  )
}

Please let me know if these scenarios work for you.

[Obiwarn]

Thank you!

The controlled Modal worked (but only if put outside of the Dropdown Menu).

Not sure if this issue is closed now :-)

[layershifter]

Nice 👍 So it's partially related to #3716 as to solve it we will need to rework events 🔧 We have there a workaround, closing this as a duplicate.