3.0.0-beta.6: AutocompleteInput do not support allowEmpty

[anewcoder1992]

What you were expecting:
allow empty of the AutocompleteInput

What happened instead:
AutocompleteInput after select one value ,even you clear the input , always save the last selected choice .

same as #3933

Related code:

                <AutocompleteInput optionText="title" allowEmpty />

Environment

• React-admin version:3.0.0-beta.6

[MiMo42]

#1 Please add allowEmpty to ReferenceInput like this:

<ReferenceInput {...props} defaultValue={newPostId} allowEmpty>
  <AutocompleteInput optionText="title" />
</ReferenceInput>

That's how you add an empty item to the list of suggestions.

#2 Clearing the input field still does not clear the selection though.
That's why I created my own custom component that omits the allowEmpty and
emptyText properties as a whole.
The custom component never shows an empty item.
It allows to clear the input by keyboard and an optional reset icon (resettable property)
Clearing the input means to deselect (value is null).
I use required() to enforce a selection if needed.
I found that this is how users expect an autocomplete to work,
as this is the common behaviour most users are used to.

[fzaninotto]

As @MiMo42 said, this is not a bug - rather a wrong usage. The allowEmpty prop must be used in ReferenceInput rather than AutocompleteInput.

As for #2, it's a more general problem: just typing text in the box isn't enough to select an option (the empty option lust like any other), users MUST click on an option in the list. I agree that's not ideal in terms of usability. Feel free to open a PR if you have a better alternative.

[MiMo42]

just typing text in the box isn't enough to select an option (the empty option lust like any other), users MUST click on an option in the list.

Yes, that's the way in unfortunately works in react admin :-/.
But that mindset is simply wrong in terms of a common autocomplete input.
Try autocomplete components of material-ui and angular for example
https://material-ui.com/components/autocomplete/
https://material.angular.io/components/autocomplete/overview
Native windows/mac/iOS/Android components are mainly the same.

No incarnation uses an additional empty item in list of suggestions.
It is just unnecessary.

Some components additionally allow pressing ESC to clear the selection (to avoid massive backspacing etc.), some provide us with an additional icon to clear the input.
Clearing the input in any case means selecting null.
Most of the components simply validate the resulting value to only contain a matching suggestion or null (empty input field).
In case of an unmatched typing the value will be replaced by null on blur.

[djhi]

just typing text in the box isn't enough to select an option (the empty option lust like any other), users MUST click on an option in the list.

We had this before and it has been a source of frustration for many users.

Some components additionally allow pressing ESC to clear the selection (to avoid massive backspacing etc.), some provide us with an additional icon to clear the input.

This would be pretty nice indeed. Would you open a PR to implement it ?

Clearing the input in any case means selecting null.

This too.

[MiMo42]

To change the current behaviour would introduce a BC break as properties would change fundamentally.
Properties emptyText and allowEmpty would get obsolete and others may be added.

Material-ui lab(!) component supports additional properties like disableCloseOnSelect, clearOnEscape, disableClearable, disableOpenOnFocus, disableListWrap etc.
But the current react-admin Beta has been touted as being API stable.

Btw.: All our efforts on existing react-admin autocomplete will get obsolete as soon as material-ui's lab autocomplete will move to the core.

Suggestions?

[djhi]

Testing the mui autocomplete in isolation (inside an addon package) until it is ready ?

[anewcoder1992]

As @MiMo42 said, this is not a bug - rather a wrong usage. The allowEmpty prop must be used in ReferenceInput rather than AutocompleteInput.

As for #2, it's a more general problem: just typing text in the box isn't enough to select an option (the empty option lust like any other), users MUST click on an option in the list. I agree that's not ideal in terms of usability. Feel free to open a PR if you have a better alternative.
@fzaninotto
when user type something can display suggestion to select, but if user do not want select anything just want to be empty , he clear the input ,then the field should be empty

[anewcoder1992]

so AutocompleteInput will not support to be empty.it will always have a value .if user have select one option ,will never clear it to be empty?

[anewcoder1992]

As @MiMo42 said, this is not a bug - rather a wrong usage. The allowEmpty prop must be used in ReferenceInput rather than AutocompleteInput.

As for #2, it's a more general problem: just typing text in the box isn't enough to select an option (the empty option lust like any other), users MUST click on an option in the list. I agree that's not ideal in terms of usability. Feel free to open a PR if you have a better alternative.

@fzaninotto i mean use < AutocompleteInput > alone ,it also can not be empty after user have select one option .