fix(Future Select): remove redundant focus management (#5015)

* Remove redundant focus lock on Select's Popover implementation

* Remove redundant autoFocus on Select's ListBox

* Remove outline when listbox is focused (happens when clicking open the select)

.changeset/twelve-pugs-whisper.md

@@ -0,0 +1,6 @@
+---
+"@kaizen/components": patch
+---
+
+Future Select: remove redundant focus management
+

packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -107,9 +107,7 @@ describe("<FilterSelect>", () => {
         render(<FilterSelectWrapper isOpen />)
         expect(screen.queryByRole("listbox")).toBeVisible()
         await waitFor(() => {
-          expect(
-            screen.queryByRole("option", { name: "Regular" })
-          ).toHaveFocus()
+          expect(screen.queryByRole("listbox")).toHaveFocus()
         })
       })
 

packages/components/src/__future__/Select/Select.spec.tsx

@@ -194,11 +194,11 @@ describe("<Select />", () => {
       })
 
       describe("Given the menu is opened", () => {
-        it("moves the focus to the first focusable element inside the menu initially", async () => {
+        it("focuses the listbox initially", async () => {
           const { getByRole } = render(<SelectWrapper defaultOpen />)
           expect(getByRole("listbox")).toBeVisible()
           await waitFor(() => {
-            expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+            expect(getByRole("listbox")).toHaveFocus()
           })
         })
         it("is closed when hits the escape key", async () => {
@@ -305,12 +305,12 @@ describe("<Select />", () => {
         })
       })
 
-      it("keeps the focus ring at the first element when hits arrow up key on it", async () => {
+      it("focuses the last item in the list on up arrow press", async () => {
         const { getByRole } = render(<SelectWrapper />)
         await user.tab()
         await user.keyboard("{ArrowUp}")
         await waitFor(() => {
-          expect(getByRole("option", { name: "Short black" })).toHaveFocus()
+          expect(getByRole("option", { name: "Magic" })).toHaveFocus()
         })
       })
 

packages/components/src/__future__/Select/Select.tsx

@@ -191,16 +191,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
           trigger(selectToggleProps, selectToggleProps.ref)
         )}
         {state.isOpen && (
-          <Popover
-            id={popoverId}
-            portalContainer={portalContainer}
-            refs={refs}
-            focusOnProps={{
-              onEscapeKey: state.close,
-              onClickOutside: state.close,
-              noIsolation: true,
-            }}
-          >
+          <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
               <SelectPopoverContents menuProps={menuProps}>
                 {children}

packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.module.scss

@@ -5,8 +5,8 @@
   padding: 0;
   display: grid;
   max-height: 22rem;
+}
 
-  &.focus {
-    outline: none;
-  }
+.listBox:focus-visible {
+  outline: none;
 }

packages/components/src/__future__/Select/subcomponents/ListBox/ListBox.tsx

@@ -23,7 +23,7 @@ export const ListBox = <Option extends SelectOption>({
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLUListElement>(null)
   const { listBoxProps } = useListBox(
-    { ...menuProps, disallowEmptySelection: true, autoFocus: "first" },
+    { ...menuProps, disallowEmptySelection: true },
     state,
     ref
   )