From e2a4d357763243344ba8a122556c4d08e9fc1314 Mon Sep 17 00:00:00 2001 From: qubis741 Date: Mon, 14 Nov 2022 16:29:24 +0100 Subject: [PATCH 01/20] added Select input to exception for useFocusTrap --- src/utils/useFocusTrap/useFocusTrap.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/utils/useFocusTrap/useFocusTrap.tsx b/src/utils/useFocusTrap/useFocusTrap.tsx index 58488433d..82da7cc17 100644 --- a/src/utils/useFocusTrap/useFocusTrap.tsx +++ b/src/utils/useFocusTrap/useFocusTrap.tsx @@ -75,10 +75,15 @@ const useFocusTrap = ({ } const trapFocus: EventListener = (event) => { - const eventTarget = event.target as Element; + const eventTarget = event.target as HTMLElement; // If focus is called on CkeEditor Element (for example Link dialog), we want to keep focus there, not back in our dialog const isCkEditorElement = eventTarget.className.includes('cke'); - if (!isCkEditorElement && !currentFocusRef.contains(eventTarget)) { + /** + ** If focus is called on Select input inside focus trap but not directly (for example DatePickerInput(typeable) Monthly picker), + ** we want to keep focus there, not back in our dialog + */ + const isSelect = eventTarget.dataset.isSelect; + if (!isCkEditorElement && !isSelect && !currentFocusRef.contains(eventTarget)) { if (document.activeElement === event.target) { if (event.target === topFocusBumperRef.current) { // Reset the focus to the last element when focusing in reverse (shift-tab) From 3adb33c7e9014f2e07ecf7ca35b07bcd2779dbae Mon Sep 17 00:00:00 2001 From: qubis741 Date: Mon, 14 Nov 2022 16:32:15 +0100 Subject: [PATCH 02/20] pass data attribute in Select Input so we can detect it in focus trap --- src/components/select/Select.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx index 517be86b2..093bd9cb8 100644 --- a/src/components/select/Select.tsx +++ b/src/components/select/Select.tsx @@ -15,6 +15,7 @@ import ReactSelect, { Props, StylesConfig, ValueContainerProps, + components as ReactSelectComponents, } from 'react-select'; import ReactCreatableSelect from 'react-select/creatable'; import SelectType from 'react-select/dist/declarations/src/Select'; @@ -466,6 +467,7 @@ function Select