[@mantine/core] Combobox: Fix Combobox.Search overflow when `Scroll…

…Area` is used in the dropdown (#6562)
mantinedev · Aug 7, 2024 · 5263671 · 5263671
1 parent d19341f
commit 5263671
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.module.css b/packages/@mantine/core/src/components/Combobox/Combobox.module.css
@@ -4,6 +4,10 @@
 
   &:has([data-mantine-scrollbar]) {
     padding-inline-end: 0;
+
+    .search {
+      max-width: calc(100% + var(--combobox-padding));
+    }
   }
 
   &[data-hidden] {

diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx b/packages/@mantine/core/src/components/Combobox/Combobox.story.tsx
@@ -396,3 +396,77 @@ export function InteractiveHeaderAndFooter() {
     </div>
   );
 }
+
+const groceries = [
+  '🍎 Apples',
+  '🍌 Bananas',
+  '🥦 Broccoli',
+  '🥕 Carrots',
+  '🍫 Chocolate',
+  '🍇 Grapes',
+  '🍋 Lemon',
+  '🥬 Lettuce',
+  '🍄 Mushrooms',
+  '🍊 Oranges',
+  '🥔 Potatoes',
+  '🍅 Tomatoes',
+  '🥚 Eggs',
+  '🥛 Milk',
+  '🍞 Bread',
+  '🍗 Chicken',
+  '🍔 Hamburger',
+  '🧀 Cheese',
+  '🥩 Steak',
+  '🍟 French Fries',
+  '🍕 Pizza',
+  '🥦 Cauliflower',
+  '🥜 Peanuts',
+  '🍦 Ice Cream',
+  '🍯 Honey',
+  '🥖 Baguette',
+  '🍣 Sushi',
+  '🥝 Kiwi',
+  '🍓 Strawberries',
+];
+
+export function SearchWithScrollArea() {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [value, setValue] = useState('');
+  const shouldFilterOptions = !groceries.some((item) => item === value);
+  const filteredOptions = shouldFilterOptions
+    ? groceries.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))
+    : groceries;
+
+  const options = filteredOptions.map((item) => (
+    <Combobox.Option value={item} key={item}>
+      {item}
+    </Combobox.Option>
+  ));
+
+  return (
+    <Combobox
+      onOptionSubmit={(optionValue) => {
+        setValue(optionValue);
+        combobox.closeDropdown();
+      }}
+      store={combobox}
+      withinPortal={false}
+    >
+      <Combobox.Target>
+        <Button onClick={() => combobox.openDropdown()}>{value || 'Select an item'}</Button>
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Search />
+        <Combobox.Options>
+          <ScrollArea.Autosize mah={200} type="scroll">
+            {options.length === 0 ? <Combobox.Empty>Nothing found</Combobox.Empty> : options}
+          </ScrollArea.Autosize>
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+}