fix: focusing issues after clear

Author: r0b1n

packages/shared/widget-plugin-dropdown-filter/src/controls/base/ClearButton.tsx

@@ -13,6 +13,10 @@ type ClearButtonProps = {
     visible: boolean;
 };
 
+const stopKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+};
+
 export function ClearButton(props: ClearButtonProps): ReactElement | null {
     const { cls, onClick, visible } = props;
 
@@ -28,7 +32,7 @@ export function ClearButton(props: ClearButtonProps): ReactElement | null {
     );
 
     return visible ? (
-        <button className={cls.clear} aria-label="Clear selection" onClick={onClickHandler}>
+        <button className={cls.clear} aria-label="Clear selection" onClick={onClickHandler} onKeyDown={stopKeyDown}>
             <Cross className={cls.clearIcon} />
         </button>
     ) : null;

packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx

@@ -51,7 +51,14 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                     placeholder: props.empty ? (isOpen ? props.inputPlaceholder : props.emptyCaption) : undefined
                 })}
             />
-            <ClearButton cls={cls} onClick={props.onClear} visible={!props.empty} />
+            <ClearButton
+                cls={cls}
+                onClick={() => {
+                    props.onClear();
+                    inputRef.current?.focus();
+                }}
+                visible={!props.empty}
+            />
             <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
                 <Arrow className={cls.stateIcon} />
             </button>

packages/shared/widget-plugin-dropdown-filter/src/controls/hooks/useFloatingMenu.tsx

@@ -1,7 +1,9 @@
 import { useMemo } from "react";
-import { autoUpdate, size, useFloating } from "@floating-ui/react-dom";
+import { autoUpdate, size, useFloating, ReferenceType } from "@floating-ui/react-dom";
 
-export function useFloatingMenu(open: boolean): ReturnType<typeof useFloating> {
+export function useFloatingMenu<T extends ReferenceType = HTMLDivElement>(
+    open: boolean
+): ReturnType<typeof useFloating<T>> {
     const middleware = useMemo(
         () => [
             size({
@@ -15,7 +17,7 @@ export function useFloatingMenu(open: boolean): ReturnType<typeof useFloating> {
         []
     );
 
-    return useFloating({
+    return useFloating<T>({
         open,
         placement: "bottom-start",
         strategy: "fixed",

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx

@@ -49,7 +49,14 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
             <div className={cls.inputContainer}>
                 <span className={cls.toggle}>{props.value}</span>
                 <div className={`${cls.root}-controls`}>
-                    <ClearButton cls={cls} onClick={props.onClear} visible={showClear} />
+                    <ClearButton
+                        cls={cls}
+                        onClick={() => {
+                            props.onClear();
+                            refs.reference.current?.focus();
+                        }}
+                        visible={showClear}
+                    />
                     <Arrow className={cls.stateIcon} />
                 </div>
             </div>

packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx

@@ -113,7 +113,14 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                     </div>
                 )}
             </div>
-            <ClearButton cls={cls} onClick={props.onClear} visible={!props.empty} />
+            <ClearButton
+                cls={cls}
+                onClick={() => {
+                    props.onClear();
+                    inputContainerRef.current?.querySelector("input")?.focus();
+                }}
+                visible={!props.empty}
+            />
             <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
                 <Arrow className={cls.stateIcon} />
             </button>