[@mantine/core] Combobox: Fix clicks on footer and header triggering …

…dropdown close (#6344) * Prevent mouse down event on ComboboxHeader * Prevent mouse down event on ComboboxFooter * Add storybook with interactive header and footer * Fix prettier
mantinedev · Jun 13, 2024 · a00babc · a00babc
1 parent dd3c852
commit a00babc
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx b/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable no-console */
 
 import { useState } from 'react';
+import { Anchor } from '../Anchor';
 import { Button } from '../Button';
+import { Popover } from '../Popover';
 import { ScrollArea } from '../ScrollArea';
+import { Text } from '../Text';
 import { TextInput } from '../TextInput';
 import { Combobox } from './Combobox';
 import { useCombobox } from './use-combobox/use-combobox';
@@ -335,3 +338,61 @@ export function WithGroups() {
     </StoryBase>
   );
 }
+
+export function InteractiveHeaderAndFooter() {
+  const store = useCombobox();
+  const [active, setActive] = useState<string | null>(null);
+  const [value, setValue] = useState('');
+
+  const options = fruitsData.map((fruit) => (
+    <Combobox.Option value={fruit.value} key={fruit.value} active={active === fruit.value}>
+      {active === fruit.value && '✓'} {fruit.label}
+    </Combobox.Option>
+  ));
+
+  return (
+    <div style={{ padding: 40 }}>
+      <Combobox
+        store={store}
+        withinPortal={false}
+        onOptionSubmit={(val) => {
+          setActive(val);
+          setValue(fruitsData.find((fruit) => fruit.value === val)!.label);
+        }}
+      >
+        <Combobox.Target>
+          <TextInput
+            placeholder="Pick a value"
+            onFocus={() => store.openDropdown()}
+            onBlur={() => store.closeDropdown()}
+            value={value}
+            onChange={(event) => {
+              setValue(event.currentTarget.value);
+            }}
+          />
+        </Combobox.Target>
+        <Combobox.Dropdown>
+          <Combobox.Header>
+            <Popover width={200} position="right" withArrow shadow="md">
+              <Popover.Target>
+                <Button size="compact-xs">Toggle popover</Button>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <Text size="xs">
+                  The TextInput remains focused and the ComboBox stays visible, even though we
+                  expect the `onBlur` event to close the dropdown
+                </Text>
+              </Popover.Dropdown>
+            </Popover>
+          </Combobox.Header>
+          <Combobox.Options>{options}</Combobox.Options>
+          <Combobox.Footer>
+            <Anchor fz="xs" href="https://mantine.dev" target="_blank">
+              Visit mantine.dev while ComboBox stays open
+            </Anchor>
+          </Combobox.Footer>
+        </Combobox.Dropdown>
+      </Combobox>
+    </div>
+  );
+}
diff --git a/packages/@mantine/core/src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx b/packages/@mantine/core/src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx
@@ -40,6 +40,9 @@ export const ComboboxFooter = factory<ComboboxFooterFactory>((props, ref) => {
       ref={ref}
       {...ctx.getStyles('footer', { className, classNames, style, styles })}
       {...others}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
     />
   );
 });

diff --git a/packages/@mantine/core/src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx b/packages/@mantine/core/src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx
@@ -40,6 +40,9 @@ export const ComboboxHeader = factory<ComboboxHeaderFactory>((props, ref) => {
       ref={ref}
       {...ctx.getStyles('header', { className, classNames, style, styles })}
       {...others}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
     />
   );
 });