Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Autocomplete] Zero (0) integer key display throws #18994

Merged
merged 2 commits into from
Dec 27, 2019
Merged

[Autocomplete] Zero (0) integer key display throws #18994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04eaeb0
Update inputValueFilter
Dec 27, 2019
661a6d4
Add test and refactor for clarity
eps1lon Dec 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -889,4 +889,34 @@ describe('<Autocomplete />', () => {
expect(textbox).to.not.have.focus;
});
});

describe('prop: getOptionLabel', () => {
it('is considered for falsy values when filtering the the list of options', () => {
const { getAllByRole } = render(
<Autocomplete
options={[0, 10, 20]}
getOptionLabel={option => (option === 0 ? 'Any' : option.toString())}
renderInput={params => <TextField {...params} autoFocus />}
value={0}
/>,
);

const options = getAllByRole('option');
expect(options).to.have.length(3);
});

it('is not considered for nullish values when filtering the list of options', () => {
const { getAllByRole } = render(
<Autocomplete
options={[null, 10, 20]}
getOptionLabel={option => (option === null ? 'Any' : option.toString())}
renderInput={params => <TextField {...params} autoFocus />}
value={null}
/>,
);

const options = getAllByRole('option');
expect(options).to.have.length(3);
});
});
});
10 changes: 6 additions & 4 deletions packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,8 +232,8 @@ export default function useAutocomplete(props) {
const [openState, setOpenState] = React.useState(false);
const open = isOpenControlled ? openProp : openState;

const inputValueFilter =
!multiple && value && inputValue === getOptionLabel(value) ? '' : inputValue;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should start linting against these. It's hidden loose equality checking and I think we had like 5-10 issues the last year concerning these. In a typed language this might be ok (if you know the type already is boolean). In a weakly typed language this is dangerous while not improving readability (I'd say it's even worse). The added bytes is negligible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also remember a few occurrences of this type of bug. It's fascinating to see the length of which the components get battle-tested.

const inputValueIsSelectedValue =
!multiple && value != null && inputValue === getOptionLabel(value);

let popupOpen = open;

Expand All @@ -250,7 +250,9 @@ export default function useAutocomplete(props) {
}
return true;
}),
{ inputValue: inputValueFilter },
// we use the empty string to manipulate `filterOptions` to not filter any options
// i.e. the filter predicate always returns true
{ inputValue: inputValueIsSelectedValue ? '' : inputValue },
)
: [];

Expand Down Expand Up @@ -585,7 +587,7 @@ export default function useAutocomplete(props) {
inputRef.current.value.length,
);
}
} else if (freeSolo && inputValueFilter !== '') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Introduced in #18786.

The Enter key shouldn't trigger a new onChange event if its already currently selected.

-- #18344 (comment)

For future reference: Prefer to codify this explicitly rather than communicating this implicitly with a type (here: the empty string). A variable if (inputValueIsSelectedValue === false) is more readable than if (inputValueFilter === '')

Copy link
Member

@oliviertassinari oliviertassinari Dec 27, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds fair, it will help our future self.

} else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
selectNewValue(event, inputValue);
}
break;
Expand Down