feat(combobox-web): select all button focus styling

mendix · Jan 12, 2024 · 7aa5c1f · 7aa5c1f
1 parent 14b3dae
commit 7aa5c1f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx
@@ -143,6 +143,7 @@ export function MultiSelection({
                         <SelectAllButton
                             value={isOptionsSelected}
                             id={`${options.inputId}-select-all-button`}
+                            unfocused={highlightedIndex >= 0}
                             ariaLabel={a11yConfig.ariaLabels.selectAll}
                             onChange={() => {
                                 if (isOptionsSelected === "all") {

diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/SelectAllButton.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/SelectAllButton.tsx
@@ -1,19 +1,27 @@
-import { UseComboboxPropGetters } from "downshift/typings";
-import { ReactElement, Fragment, createElement } from "react";
 import { ThreeStateCheckBox, ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
+import classNames from "classnames";
+import { UseComboboxPropGetters } from "downshift/typings";
+import { Fragment, ReactElement, createElement } from "react";
 import { CaptionContent } from "../../helpers/Association/AssociationSimpleCaptionsProvider";
 
 interface SelectAllButtonProps extends Partial<UseComboboxPropGetters<string>> {
     id?: string;
     ariaLabel?: string;
     value: ThreeStateCheckBoxEnum;
+    unfocused: boolean;
     onChange?: () => void;
 }
 
-export function SelectAllButton({ id, ariaLabel, value, onChange }: SelectAllButtonProps): ReactElement {
+export function SelectAllButton({ id, ariaLabel, value, unfocused, onChange }: SelectAllButtonProps): ReactElement {
     return (
         <Fragment>
-            <span className="widget-combobox-icon-container">
+            <span
+                className={classNames(
+                    "widget-combobox-menu-header-select-all-button",
+                    "widget-combobox-icon-container",
+                    { unfocused }
+                )}
+            >
                 <ThreeStateCheckBox value={value} id={id} onChange={onChange} />
             </span>
             {ariaLabel ? (

diff --git a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts
@@ -205,7 +205,7 @@ function useComboboxProps(
                             })
                         };
                     case useCombobox.stateChangeTypes.InputBlur:
-                        return state;
+                        return { ...state, highlightedIndex: -1 };
                     default:
                         return changes;
                 }

diff --git a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss
@@ -48,11 +48,22 @@ $menu-outer-padding: 10px;
                 background-color: $highlighted-index;
             }
 
-            &:has(input[type="checkbox"]:hover) + .widget-combobox-menu-list input[type="checkbox"]:after {
+            &:has(input[type="checkbox"]:hover, :focus, :focus-within)
+                + .widget-combobox-menu-list
+                input[type="checkbox"]:after {
                 content: "";
                 border-color: $hover-color;
             }
+
+            &-select-all-button {
+                &.unfocused {
+                    .three-state-checkbox {
+                        outline: none;
+                    }
+                }
+            }
         }
+
         &-footer {
             border-top: 1px solid $gray-primary;
             padding: $menu-outer-padding;