diff --git a/apps/docs/components/ExampleSelectManageable.tsx b/apps/docs/components/ExampleSelectManageable.tsx
index 87e40366..e7d9509d 100644
--- a/apps/docs/components/ExampleSelectManageable.tsx
+++ b/apps/docs/components/ExampleSelectManageable.tsx
@@ -28,7 +28,14 @@ export function ExampleSelectManageable() {
)}
listEndDecorator={(
- } fullWidth>
+ }
+ onMouseDown={(event) => {
+ // Prevent input blur which triggers closing the Popper
+ event.preventDefault();
+ }}
+ >
Add
)}
diff --git a/packages/react-ui/Select/Select.tsx b/packages/react-ui/Select/Select.tsx
index 39e58bca..ef28a922 100644
--- a/packages/react-ui/Select/Select.tsx
+++ b/packages/react-ui/Select/Select.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect, KeyboardEvent, SyntheticEvent, FocusEvent, ReactNode } from 'react';
-import { Autocomplete, TextField, CircularProgress, ChipTypeMap, Popper, Paper } from '@mui/material';
+import { Autocomplete, TextField, CircularProgress, ChipTypeMap, Paper } from '@mui/material';
import { type AutocompleteProps, createFilterOptions } from '@mui/material/Autocomplete';
import { useDebounce } from '@enterwell/react-hooks';
@@ -238,18 +238,12 @@ export function Select<
{displayOption ? displayOption(option) : option.label}
)}
- PopperComponent={({ children, ...rest }) => (
-
-
- {listStartDecorator}
- {typeof children === 'function' ? children({ placement: rest.placement ?? 'auto' }) : children}
- {listEndDecorator}
-
-
+ PaperComponent={({ children, ...rest }) => (
+
+ {listStartDecorator}
+ {children}
+ {listEndDecorator}
+
)}
filterOptions={customFilterOptions}
renderInput={(params) => (
diff --git a/packages/react-ui/changes/Changed [Select] The way list decorators are injected b/packages/react-ui/changes/Changed [Select] The way list decorators are injected
new file mode 100644
index 00000000..e69de29b