fix(popup): do not bubble keyboard events to parent

src/components/Popup.js

@@ -54,7 +54,11 @@ export function Popup(props) {
   const focusTrapRef = useRef(null);
   const popupRef = useRef(null);
 
-  const handleKeyPress = event => {
+  const handleKeydown = event => {
+
+    // do not allow keyboard events to bubble
+    event.stopPropagation();
+
     if (closeOnEscape && event.key === 'Escape') {
       onClose();
     }
@@ -85,14 +89,6 @@ export function Popup(props) {
     style.height = height + 'px';
   }
 
-  useEffect(() => {
-    if (popupRef.current) {
-      popupRef.current.addEventListener('keydown', handleKeyPress);
-    }
-
-    return () => { popupRef.current.removeEventListener('keydown', handleKeyPress); };
-  }, [ popupRef ]);
-
   useEffect(() => {
     if (popupRef.current) {
       popupRef.current.addEventListener('focusin', handleFocus);
@@ -124,6 +120,7 @@ export function Popup(props) {
       aria-label={ title }
       tabIndex={ -1 }
       ref={ popupRef }
+      onKeyDown={ handleKeydown }
       role="dialog"
       class={ classNames('bio-properties-panel-popup', className) }
       style={ style }>{ props.children }</div>

test/spec/components/FeelPopup.spec.js

@@ -128,6 +128,32 @@ describe('<FeelPopup>', function() {
   });
 
 
+  it('should not bubble keyboard events to parent', async function() {
+
+    // given
+    const keyDownSpy = sinon.spy();
+
+    container.addEventListener('keydown', keyDownSpy);
+
+    const result = createFeelPopup({ type: 'feel', popupContainer: container }, container);
+
+    const childComponent = domQuery('.child-component', container);
+    const btn = domQuery('button', childComponent);
+
+    await act(() => {
+      btn.click();
+    });
+
+    const editor = getFeelEditor(result.container);
+
+    // when
+    fireEvent.keyDown(domQuery('.cm-content', editor), { key: 'A' });
+
+    // then
+    expect(keyDownSpy).to.not.have.been.called;
+  });
+
+
   describe('<feel>', function() {
 
     it('should open <feel> editor', async function() {

test/spec/components/Popup.spec.js

@@ -166,6 +166,28 @@ describe('<Popup>', function() {
   });
 
 
+  it('should not bubble keyboard events to parent', async function() {
+
+    // given
+    const keyDownSpy = sinon.spy();
+
+    container.addEventListener('keydown', keyDownSpy);
+
+    await act(() => {
+      render(<Popup container={ container }><input name="foo"></input></Popup>, { container });
+    });
+
+    const popup = domQuery('.bio-properties-panel-popup', document.body);
+    const input = domQuery('input', popup);
+
+    // when
+    fireEvent.keyDown(input, { key: 'A' });
+
+    // then
+    expect(keyDownSpy).to.not.have.been.called;
+  });
+
+
   describe('Popup.Title', function() {
 
     it('should render children', function() {