dropdown closes when esc key... (npm#254)

makhmudjon-inadullaev · Makhmudjon Inadullaev · Makhmudjon Inadullaev · web-flow · commit 5f3fbe17c3b1 · 2022-10-27T20:18:26.000+05:00
Co-authored-by: Makhmudjon Inadullaev &lt;makhmudjon@Makhmudjons-MacBook-Pro-2.local&gt;
Co-authored-by: Makhmudjon Inadullaev &lt;makhmudjon@MakhmudjonsMBP2.home&gt;
diff --git a/theme/src/components/variant-select.js b/theme/src/components/variant-select.js
@@ -54,8 +54,19 @@ function VariantSelect(props) {
       );
   });
 
+  /** 
+   *  We should use '@primer/react' package as '@primer/components' package depricated and moved to '@primer/react'.
+   *  We have no closing/opening control with current '@primer/components' package, so document.body click event used for closing purpose.
+   */
+  // TODO: We should use 'setOpen' function returned by the useDetails hook when we move to '@primer/react' package. https://primer.style/react/deprecated/Dropdown
+  function onDropDownKeyDown (event) {
+    if (event.key === 'Escape') {
+        document.body.click()
+    }
+  }
+
   return (
-      <Dropdown overlay={props.overlay}>
+      <Dropdown onKeyDown={onDropDownKeyDown} overlay={props.overlay}>
           <Dropdown.Button>{selectedItem.variant.title}</Dropdown.Button>
           <VariantSelect.Menu direction={props.direction} width={props.menuWidth}>
               {items}
