Merge pull request #61 from fabien-ml/hotfix/#57

fix: #57
kobaltedev · Jan 19, 2023 · f35f35d · f35f35d
2 parents 68482d9 + 06bae5c
commit f35f35d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/packages/core/src/multi-select/multi-select.test.tsx b/packages/core/src/multi-select/multi-select.test.tsx
@@ -59,7 +59,7 @@ describe("MultiSelect", () => {
     expect(items[1]).toHaveTextContent("Two");
     expect(items[2]).toHaveTextContent("Three");
 
-    expect(document.activeElement).toBe(items[0]);
+    expect(document.activeElement).toBe(listbox);
 
     await triggerPress(items[0]);
     await triggerPress(items[2]);

diff --git a/packages/core/src/select/select-trigger.tsx b/packages/core/src/select/select-trigger.tsx
@@ -34,7 +34,7 @@ export const SelectTrigger = createPolymorphicComponent<"button", Button.ButtonR
 
     const [local, formControlFieldProps, others] = splitProps(
       props,
-      ["ref", "isDisabled", "onPressStart", "onPress", "onKeyDown"],
+      ["ref", "isDisabled", "onPressStart", "onPress", "onKeyDown", "onFocus", "onBlur"],
       FORM_CONTROL_FIELD_PROP_NAMES
     );
 
@@ -143,6 +143,26 @@ export const SelectTrigger = createPolymorphicComponent<"button", Button.ButtonR
       }
     };
 
+    const onFocus: JSX.EventHandlerUnion<any, FocusEvent> = e => {
+      callHandler(e, local.onFocus);
+
+      if (selectionManager().isFocused()) {
+        return;
+      }
+
+      selectionManager().setFocused(true);
+    };
+
+    const onBlur: JSX.EventHandlerUnion<any, FocusEvent> = e => {
+      callHandler(e, local.onBlur);
+
+      if (context.isOpen()) {
+        return;
+      }
+
+      selectionManager().setFocused(false);
+    };
+
     createEffect(() => onCleanup(context.registerTriggerId(fieldProps.id()!)));
 
     createEffect(() => {
@@ -171,6 +191,8 @@ export const SelectTrigger = createPolymorphicComponent<"button", Button.ButtonR
         onPressStart={onPressStart}
         onPress={onPress}
         onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
         {...formControlContext.dataset()}
         {...others}
       />

diff --git a/packages/core/src/select/select.test.tsx b/packages/core/src/select/select.test.tsx
@@ -103,7 +103,7 @@ describe("Select", () => {
       expect(items[1]).toHaveTextContent("Two");
       expect(items[2]).toHaveTextContent("Three");
 
-      expect(document.activeElement).toBe(items[0]);
+      expect(document.activeElement).toBe(listbox);
     });
 
     it("can be opened on touch up", async () => {
@@ -162,7 +162,7 @@ describe("Select", () => {
       expect(items[1]).toHaveTextContent("Two");
       expect(items[2]).toHaveTextContent("Three");
 
-      expect(document.activeElement).toBe(items[0]);
+      expect(document.activeElement).toBe(listbox);
     });
 
     it("can be opened on Space key down", async () => {
@@ -991,7 +991,7 @@ describe("Select", () => {
       expect(items[1]).toHaveTextContent("Two");
       expect(items[2]).toHaveTextContent("Three");
 
-      expect(document.activeElement).toBe(items[0]);
+      expect(document.activeElement).toBe(listbox);
 
       await triggerPress(items[2]);
 
@@ -1163,7 +1163,7 @@ describe("Select", () => {
       expect(items[1]).toHaveTextContent("Two");
       expect(items[2]).toHaveTextContent("Three");
 
-      expect(document.activeElement).toBe(items[0]);
+      expect(document.activeElement).toBe(listbox);
 
       fireEvent.pointerEnter(items[1]);
       await Promise.resolve();
@@ -1863,8 +1863,7 @@ describe("Select", () => {
       expect(trigger).toHaveTextContent("France");
     });
 
-    // TODO: failing, don't know why.
-    it.skip("should have a hidden input to marshall focus to the button", async () => {
+    it("should have a hidden input to marshall focus to the button", async () => {
       render(() => (
         <Select.Root onValueChange={onValueChange}>
           <Select.Label>Label</Select.Label>