@lumx/react 3.2.0 → 3.2.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.2.0",
-        "@lumx/icons": "^3.2.0",
+        "@lumx/core": "^3.2.1",
+        "@lumx/icons": "^3.2.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.2.0"
+    "version": "3.2.1"
 }

package/src/components/popover/Popover.tsx

@@ -173,18 +173,16 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            if (parentElement?.current) {
-                parentElement?.current.focus();
-            }
-
-            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
-            if (firstFocusable) {
+            let elementToFocus = parentElement?.current;
+            if (!elementToFocus && anchorRef?.current) {
                 // Focus the first focusable element in anchor.
-                firstFocusable.focus();
-            } else {
+                elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+            }
+            if (!elementToFocus) {
                 // Fallback on the anchor element.
-                anchorRef?.current?.focus();
+                elementToFocus = anchorRef?.current;
             }
+            elementToFocus?.focus({ preventScroll: true });
         }
 
         onClose();

package/src/components/select/SelectMultiple.stories.tsx

@@ -1,9 +1,20 @@
 /* istanbul ignore file */
 import { mdiTram } from '@lumx/icons/';
-import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
+import {
+    Chip,
+    Dialog,
+    List,
+    ListDivider,
+    ListItem,
+    ListSubheader,
+    SelectMultiple,
+    Size,
+    TextField,
+    Toolbar,
+} from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
+import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };
@@ -225,3 +236,95 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
         </SelectMultiple>
     );
 };
+
+/**
+ * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
+ */
+export const SelectWithinADialog = ({ theme }: any) => {
+    const searchFieldRef = useRef(null);
+
+    const [searchText, setSearchText] = useState<string>();
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    const filteredChoices =
+        searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
+
+    return (
+        <>
+            <Dialog isOpen>
+                <header>
+                    <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
+                </header>
+                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
+                    <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
+
+                    <SelectMultiple
+                        isOpen={isOpen}
+                        value={values}
+                        onClear={clearSelected}
+                        clearButtonProps={{ label: 'Clear' }}
+                        label={LABEL}
+                        placeholder={PLACEHOLDER}
+                        theme={theme}
+                        onInputClick={toggleSelect}
+                        onDropdownClose={closeSelect}
+                        icon={mdiTram}
+                        focusElement={searchFieldRef}
+                    >
+                        <List isClickable>
+                            <>
+                                <ListSubheader>
+                                    <TextField
+                                        clearButtonProps={{ label: 'Clear' }}
+                                        placeholder="Search"
+                                        role="searchbox"
+                                        inputRef={searchFieldRef}
+                                        onChange={setSearchText}
+                                        value={searchText}
+                                    />
+                                </ListSubheader>
+                                <ListDivider role="presentation" />
+                            </>
+
+                            {filteredChoices.length > 0
+                                ? filteredChoices.map((choice) => (
+                                      <ListItem
+                                          isSelected={values.includes(choice)}
+                                          key={choice}
+                                          onItemSelected={selectItem(choice)}
+                                          size={Size.tiny}
+                                      >
+                                          {choice}
+                                      </ListItem>
+                                  ))
+                                : [
+                                      <ListItem key={0} size={Size.tiny}>
+                                          No data
+                                      </ListItem>,
+                                  ]}
+                        </List>
+                    </SelectMultiple>
+                </div>
+            </Dialog>
+        </>
+    );
+};

package/src/components/select/WithSelectContext.tsx

@@ -1,15 +1,15 @@
-import React, { Ref, useCallback, useMemo, useRef } from 'react';
-
 import classNames from 'classnames';
+import React, { Ref, useCallback, useMemo, useRef } from 'react';
 import { uid } from 'uid';
 
+import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/react/components';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { Placement } from '@lumx/react';
 
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -30,6 +30,7 @@ export const WithSelectContext = (
     {
         children,
         className,
+        focusElement,
         isMultiple,
         closeOnClick = !isMultiple,
         disabled,
@@ -58,6 +59,7 @@ export const WithSelectContext = (
     const selectId = useMemo(() => id || `select-${uid()}`, [id]);
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
     const isFocus = useListenFocus(anchorRef);
 
     const handleKeyboardNav = useCallback(
@@ -77,6 +79,9 @@ export const WithSelectContext = (
         anchorRef?.current?.blur();
     };
 
+    // Handle focus trap.
+    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
+
     return (
         <div
             ref={mergeRefs(ref, selectRef)}
@@ -125,6 +130,7 @@ export const WithSelectContext = (
                 placement={Placement.BOTTOM_START}
                 onClose={onClose}
                 onInfiniteScroll={onInfiniteScroll}
+                ref={dropdownRef}
             >
                 {children}
             </Dropdown>

package/src/hooks/useFocusTrap.ts

@@ -72,10 +72,10 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
         // SETUP:
         if (focusElement && focusZoneElement.contains(focusElement)) {
             // Focus the given element.
-            focusElement.focus();
+            focusElement.focus({ preventScroll: true });
         } else {
             // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElement).first?.focus();
+            getFirstAndLastFocusable(focusZoneElement).first?.focus({ preventScroll: true });
         }
         FOCUS_TRAPS.register(focusTrap);