search

tokens-studio / figma-plugin

Official repository of the plugin 'Tokens Studio for Figma' (Figma Tokens)
https://www.figma.com/community/plugin/843461159747178978
MIT License
1.35k stars 194 forks source link

Edit token modal closes when clicking outside any `Select` contained within it #2885

Closed cuserox closed 3 months ago

cuserox commented 3 months ago

Describe the bug 📝 Reported by the community in the Open Beta for v2. Clicking outside a dropdown within an open modal, closes the modal.

🧐 Potential solutions

Make use of the available Select and Dialog props

Could be issue with stacking contexts and portals created by underlying Radix components. The primitives have props that we can use to change behaviour when the callbacks are used (i.e. onPointerDownOutside)

Upgrade Select and Dialog to the latest versions

Upgrade and test usage of the interaction of these two once upgraded in the DS

Resolve conflicting clashing versions

Radix components have clashing version dependencies, we could override these (thread)

  "resolutions": {
    "@radix-ui/react-dismissable-layer": "1.0.3",
    "@radix-ui/react-dialog": "1.0.3"
  },

To Reproduce Steps to reproduce the behavior:

  1. Go to "Edit token" for one of type Color
  2. Click on "Modify" and edit either the Operation or Space attributes
  3. Click outside the Select (staying inside the modal)
  4. Modal closes

Expected behavior Clicking outside a Select within a modal should not close the modal. This does not happen in the production version of the plugin.

Screenshots or Screencasts

Production

https://github.com/tokens-studio/figma-plugin/assets/114073780/f3361797-86f8-4c98-937d-6bed9b50ebc5

V2 (running locally)

👀 No console errors https://github.com/tokens-studio/figma-plugin/assets/114073780/4aeb29f3-9359-4381-9a64-23dd3b59cc07