Can't get semantic dropdown control to work in customEditor

Tags: #<Tag:0x00007efc620b4a40> #<Tag:0x00007efc620b4900>
#1

I use React for my project and one of the UI library’s I use is Semantic.
I have created several custom Editors for my grid, one is to show a dropdown list of options. I would like to use the semantic dropdown control, but for some reason, when in the customEditor , the dropdown closes as soon as you click it. It only does this when inside the CustomEditor…it works fine everywhere else in my app.

This is the portion of my output of my CustomEditor

<NativeListener 
        onMouseDown={this.stopMousedownPropagation} 
        >
          <div
            tabIndex="0"
            style={{
              position: 'absolute',
              zIndex: 1001,
              backgroundColor: 'white',
              marginLeft:'1px',
              marginRight:'1px',
              top: 0,
              left:0,
            }}
          >
           <DropDownContainer />
          </div>
</NativeListener>

and here is the dummy / test component

import React from 'react';
import { Dropdown } from 'semantic-ui-react';

const DropdownContainer =() =>{
    const options=[
        {key:'1',value:'1',text:'one'},
        {key:'2',value:'2',text:'two'},
        {key:'3',value:'3',text:'three'},
        {key:'4',value:'4',text:'four'},
    ]

    return (
        <div>
            <Dropdown options={options} selection />
        </div>
    )
}
export default DropdownContainer

I really would like to use this dropdown component…so any hints on what might be happening or how to fix?

#2

Hi @mhennessy7

Would it be possible for you to send us a demo in CodeSandbox or StackBltiz? That way it would be easier to debug. It will be also helpful with your second question as, I believe, it’s related: OnkeyDown not working in NativeListener?

OnkeyDown not working in NativeListener?
#3

My environment is quite large/complex. However, do you have an example of a customEditor working in CodeSandbox which I could then fork? That should be very straight forward if I can use a starting point.

#4

Hi @mhennessy7

I understand, here we have a few different examples, but they are in jsFiddle:

I’d also like to ask you if you have an active license?

#5