8000 [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#… · mui/material-ui@dd0bb69 · GitHub
[go: up one dir, main page]
Skip to content

Commit dd0bb69

Browse files
ZeeshanTamboliZeeshanTamboli
authored
[Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44857)
1 parent e52a637 commit dd0bb69

File tree

2 files changed

+64
-87
lines changed

2 files changed

+64
-87
lines changed

‎packages/mui-material/src/Autocomplete/Autocomplete.js

Lines changed: 64 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -617,76 +617,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
617617
const popperSlotProps = slotProps.popper ?? componentsProps.popper;
618618
const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
619619

620-
const renderAutocompletePopperChildren = (children) => (
621-
<AutocompletePopper
622-
as={PopperComponent}
623-
disablePortal={disablePortal}
624-
style={{ width: anchorEl ? anchorEl.clientWidth : null }}
625-
ownerState={ownerState}
626-
role="presentation"
627-
anchorEl={anchorEl}
628-
open={popupOpen}
629-
{...popperSlotProps}
630-
className={clsx(classes.popper, popperSlotProps?.className)}
631-
>
632-
<AutocompletePaper
633-
ownerState={ownerState}
634-
as={PaperComponent}
635-
{...paperSlotProps}
636-
className={clsx(classes.paper, paperSlotProps?.className)}
637-
>
638-
{children}
639-
</AutocompletePaper>
640-
</AutocompletePopper>
641-
);
642-
643-
let autocompletePopper = null;
644-
if (groupedOptions.length > 0) {
645-
autocompletePopper = renderAutocompletePopperChildren(
646-
<AutocompleteListbox
647-
as={ListboxComponent}
648-
className={classes.listbox}
649-
ownerState={ownerState}
650-
{...otherListboxProps}
651-
{...ListboxProps}
652-
ref={combinedListboxRef}
653-
>
654-
{groupedOptions.map((option, index) => {
655-
if (groupBy) {
656-
return renderGroup({
657-
key: option.key,
658-
group: option.group,
659-
children: option.options.map((option2, index2) =>
660-
renderListOption(option2, option.index + index2),
661-
),
662-
});
663-
}
664-
return renderListOption(option, index);
665-
})}
666-
</AutocompleteListbox>,
667-
);
668-
} else if (loading && groupedOptions.length === 0) {
669-
autocompletePopper = renderAutocompletePopperChildren(
670-
<AutocompleteLoading className={classes.loading} ownerState={ownerState}>
671-
{loadingText}
672-
</AutocompleteLoading>,
673-
);
674-
} else if (groupedOptions.length === 0 && !freeSolo && !loading) {
675-
autocompletePopper = renderAutocompletePopperChildren(
676-
<AutocompleteNoOptions
677-
className={classes.noOptions}
678-
ownerState={ownerState}
679-
role="presentation"
680-
onMouseDown={(event) => {
681-
// Prevent input blur when interacting with the "no options" content
682-
event.preventDefault();
683-
}}
684-
>
685-
{noOptionsText}
686-
</AutocompleteNoOptions>,
687-
);
688-
}
689-
690620
return (
691621
<React.Fragment>
692622
<AutocompleteRoot
@@ -751,7 +681,70 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
751681
},
752682
})}
753683
</AutocompleteRoot>
754-
{anchorEl ? autocompletePopper : null}
684+
{anchorEl ? (
685+
<AutocompletePopper
686+
as={PopperComponent}
687+
disablePortal={disablePortal}
688+
style={{
689+
width: anchorEl ? anchorEl.clientWidth : null,
690+
}}
691+
ownerState={ownerState}
692+
role="presentation"
693+
anchorEl={anchorEl}
694+
open={popupOpen}
695+
{...popperSlotProps}
696+
className={clsx(classes.popper, popperSlotProps?.className)}
697+
>
698+
<AutocompletePaper
699+
ownerState={ownerState}
700+
as={PaperComponent}
701+
{...paperSlotProps}
702+
className={clsx(classes.paper, paperSlotProps?.className)}
703+
>
704+
{loading && groupedOptions.length === 0 ? (
705+
<AutocompleteLoading className={classes.loading} ownerState={ownerState}>
706+
{loadingText}
707+
</AutocompleteLoading>
708+
) : null}
709+
{groupedOptions.length === 0 && !freeSolo && !loading ? (
710+
<AutocompleteNoOptions
711+
className={classes.noOptions}
712+
ownerState={ownerState}
713+
role="presentation"
714+
onMouseDown={(event) => {
715+
// Prevent input blur when interacting with the "no options" content
716+
event.preventDefault();
717+
}}
718+
>
719+
{noOptionsText}
720+
</AutocompleteNoOptions>
721+
) : null}
722+
{groupedOptions.length > 0 ? (
723+
<AutocompleteListbox
724+
as={ListboxComponent}
725+
className={classes.listbox}
726+
ownerState={ownerState}
727+
{...otherListboxProps}
728+
{...ListboxProps}
729+
ref={combinedListboxRef}
730+
>
731+
{groupedOptions.map((option, index) => {
732+
if (groupBy) {
733+
return renderGroup({
734+
key: option.key,
735+
group: option.group,
736+
children: option.options.map((option2, index2) =>
737+
renderListOption(option2, option.index + index2),
738+
),
739+
});
740+
}
741+
return renderListOption(option, index);
742+
})}
743+
</AutocompleteListbox>
744+
) : null}
745+
</AutocompletePaper>
746+
</AutocompletePopper>
747+
) : null}
755748
</React.Fragment>
756749
);
757750
});

‎packages/mui-material/src/Autocomplete/Autocomplete.test.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2362,22 +2362,6 @@ describe('<Autocomplete />', () => {
23622362

23632363
expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
23642364
});
2365-
2366-
it('should not render popper when there are no options', () => {
2367-
render(
2368-
<Autocomplete
2369-
open
2370-
freeSolo
2371-
options={[]}
2372-
renderInput={(params) => <TextField {...params} />}
2373-
slotProps={{
2374-
popper: { 'data-testid': 'popperRoot' },
2375-
}}
2376-
/>,
2377-
);
2378-
const popper = screen.queryByTestId('popperRoot');
2379-
expect(popper).to.equal(null);
2380-
});
23812365
});
23822366

23832367
describe('prop: onChange', () => {

0 commit comments

Comments
 (0)
0