fix(popup-menu): make actual widget keyboard selectable

bpmn-io · Nov 25, 2022 · 9fda6b0 · 9fda6b0
1 parent f78a1a5
commit 9fda6b0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/assets/diagram-js.css b/assets/diagram-js.css
@@ -536,6 +536,7 @@ marker.djs-dragger tspan {
   box-shadow: 0px 2px 10px var(--popup-shadow-color);
   padding-top: 12px;
   min-width: 120px;
+  outline: none;
 }
 
 .djs-popup-search input {

diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js
@@ -258,19 +258,17 @@ function PopupMenuWrapper(props) {
     onClose();
   }, [ onClose ]);
 
-  const overlayRef = useRef();
-
   useLayoutEffect(() => {
     if (typeof positionGetter !== 'function') {
       return;
     }
 
-    const overlayEl = overlayRef.current;
-    const position = positionGetter(overlayEl);
+    const popupEl = popupRef.current;
+    const position = positionGetter(popupEl);
 
-    overlayEl.style.left = `${position.x}px`;
-    overlayEl.style.top = `${position.y}px`;
-  }, [ overlayRef.current, positionGetter ]);
+    popupEl.style.left = `${position.x}px`;
+    popupEl.style.top = `${position.y}px`;
+  }, [ popupRef.current, positionGetter ]);
 
   // focus popup initially, on mount
   useLayoutEffect(() => {
@@ -281,15 +279,14 @@ function PopupMenuWrapper(props) {
     <div
       class="djs-popup-backdrop"
       onClick=${ checkClose }
-      onKeydown=${ onKeydown }
-      onKeyup=${ onKeyup }
-      ref=${ popupRef }
-      tabIndex="-1"
     >
       <div
         class=${ classNames('djs-popup', className) }
-        ref=${ overlayRef }
-        style=${ getOverlayStyle(props) }
+        style=${ getPopupStyle(props) }
+        onKeydown=${ onKeydown }
+        onKeyup=${ onKeyup }
+        ref=${ popupRef }
+        tabIndex="-1"
       >
         ${children}
       </div>
@@ -299,7 +296,7 @@ function PopupMenuWrapper(props) {
 
 // helpers //////////////////////
 
-function getOverlayStyle(props) {
+function getPopupStyle(props) {
   return {
     transform: `scale(${props.scale})`,
     width: `${props.width}px`

diff --git a/test/spec/features/popup-menu/PopupMenuComponentSpec.js b/test/spec/features/popup-menu/PopupMenuComponentSpec.js
@@ -99,7 +99,7 @@ describe('features/popup-menu - <PopupMenu>', function() {
       });
 
       const popupEl = domQuery(
-        '.djs-popup-backdrop', container
+        '.djs-popup', container
       );
 
       // then