From 7aa5c1f90b615a970fc1e316865d299903a70378 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Thu, 11 Jan 2024 23:44:29 +0100
Subject: [PATCH] feat(combobox-web):  select all button focus styling

---
 .../components/MultiSelection/MultiSelection.tsx |  1 +
 .../MultiSelection/SelectAllButton.tsx           | 16 ++++++++++++----
 .../src/hooks/useDownshiftMultiSelectProps.ts    |  2 +-
 .../combobox-web/src/ui/Combobox.scss            | 13 ++++++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx
index f4aef83984..7b3a7c4949 100644
--- 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
index 28aa66bd21..15564bef6e 100644
--- 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
index c026e392e2..ea803f8a4e 100644
--- 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
index 1aae0b1cf5..7ab0fd22b0 100644
--- 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;