Clicking on dropdown inside node doesn't fire onNodeClick therefore it doesn't elevate the content

[kind vine]

When I have for example two nodes, one is above and one below, when I click on the dropdown menu of node above, the dropdown goes under the other node.

I found that this is because when clicking on the dropdown button, it doesn't trigger onNodeClick of reactflow, what's the solution to this?

[rustic sonnet]

could you add a click handler to the select that sets the node to selected?

[kind vine]

The solution was to add onClick on parent container of <Select> (react-select) and inside that set current node as selected and all of the other de-select (false).

<div className="content" onClick={(event) => {
          const node = getNode(nodeId);
          node.selected = true;

          const nodes = getNodes();
          nodes.forEach((n) => {
            if (n.id !== nodeId) {
              n.selected = false;
            }
          });
          setNodes((nds) => nodes.map((n) => n));
      }}>
        <Select
          className="react-select nodrag"
          options={architecturesOptions}
          value={someValueVariable}
          onChange={someHandleFunction}
          styles={{
            option: (baseStyles, state) => ({
              // ...baseStyles,
              backgroundColor: state.isFocused ? '#474b58' : '#373A45',
              display: 'inline-block',
              color: '#B4B6C3 !important',
              padding: '10px 5px',
              width: '100%'
            })
          }}
        />
</div>