search

bpmn-io / dmn-js

View and edit DMN diagrams in the browser.
https://bpmn.io/toolkit/dmn-js/
Other
294 stars 136 forks source link

InputSelect is not working when diagram is inside Antd Tabs component #615

Open DenysVuika opened 3 years ago

DenysVuika commented 3 years ago

Describe the Bug

The dropdown components in Decision Table and Literal Expression editors are not working when dmn-js is child of the Tab component.

The following component is having issues: InputSelect

Steps to Reproduce

Steps to reproduce the behavior:

  1. Visit the playground: https://codesandbox.io/s/dmnjs-input-bug-72267?file=/index.js
  2. Select the shape and switch to the Decision Table mode
  3. Try to change the Hit Policy in the dropdown

Actual Behavior

The dropdown is not working with the mouse, clicking any dropdown item has no effect. Notes: the keyboard is working fine.

Expected Behavior

The input select component should work.

Additional Notes

The Sandbox includes the working scenario too. Just comment out the "tabs" example and uncomment the "Scenario 1" to see InputSelect working again.

Environment

Please complete the following information:

nikku commented 3 years ago

Could you be specific regarding your environment? Which version of MacOS, which version of Microsoft Edge do you use?

barmac commented 3 years ago

I can reproduce that in the CodeSandbox both on Chrome and Firefox.

DenysVuika commented 3 years ago

@nikku added Chrome and Edge versions, it happens in all browsers so far as the problem is with the component, not the browser imho

barmac commented 3 years ago

This happens also when I use dmn-js@9.

barmac commented 3 years ago

OK so I debugged this issue a bit and discovered that when you click an option, a mousedown event is fired with the tab pane div element as the event target. This triggers our global click handler which is responsible for closing the dropdown once you click outside of it.

image

Why is the tab pane set as the event target? It appears that it's a focusable element since it has tabindex property set to 0.

image

When I removed tabindex attribute from the tab pane element, the InputSelect dropdown worked correctly again. So for now I am inclined to think that the problem is within the ant-design tabs as I don't see a reason why a container should be able to be focused and how it would receive user input. The solution I'd suggest is to remove tabindex from the container, but this is outside of dmn-js scope.

BTW there is also a closed issue in the ant-design repo which might be related.

barmac commented 3 years ago

tldr;

InputSelect handles mousedown events in the following way: 1) target is within the dropdown -> do nothing 2) target is outside of the dropdown -> close the dropdown

When you place dmn-js within an ant-design tab, pushing mouse button sets the whole tab as the event target even if mouse cursor is on the dropdown.

DenysVuika commented 3 years ago

@barmac thanks a lot for investigation!

barmac commented 3 years ago

I'll close this issue for now as I don't think we can do anything to fix it.

nikku commented 1 year ago

Given further user feedback (https://github.com/bpmn-io/dmn-js/issues/755#issuecomment-1521554200, https://github.com/bpmn-io/dmn-js/issues/755#issuecomment-1521578014) we may want to revisit this issue. Seems we generally don't embed nicely into modals.

gogroup-official commented 1 year ago

I reproduce it here: https://codesandbox.io/s/material-ui-modal-demo-forked-7oim3u?file=/demo.js