As I mentioned in the review of #148, it might be problematic that we have entirely separate components for what essentially is "should we show this icon inside the text field or not". When it comes to implementing/using the newer SearchField component, it turns out the developer experience is a bit rough, and some functionality might get lost.
As an example, the property for setting the SearchField to readOnly is named disabled, while it is named readOnly for TextField. This lead to the property being dropped when implemented in app-frontend-react, as it was non-obvious that the same functionality had another name.
Also, support for the isValid functionality apparently does not exist in SearchField, and it might be non-obvious to an app-developer that setting their Input field variant to search will remove the functionality where the field gets a red border and indicator to let you know about any validation errors.
In my opinion, this the search field functionality should be implemented as a simple prefixIcon or suffixIcon property on TextField, instead of making a whole new component for each possible type of icon we'd want to put inside a TextField.
Related issues
148
Altinn/app-frontend-react/pull/766 (look into the changes here, and notice the big switch where either the SearchField or TextField component is used)
Description
As I mentioned in the review of #148, it might be problematic that we have entirely separate components for what essentially is "should we show this icon inside the text field or not". When it comes to implementing/using the newer SearchField component, it turns out the developer experience is a bit rough, and some functionality might get lost.
As an example, the property for setting the
SearchFieldtoreadOnlyis nameddisabled, while it is namedreadOnlyforTextField. This lead to the property being dropped when implemented in app-frontend-react, as it was non-obvious that the same functionality had another name.Also, support for the
isValidfunctionality apparently does not exist inSearchField, and it might be non-obvious to an app-developer that setting theirInputfieldvarianttosearchwill remove the functionality where the field gets a red border and indicator to let you know about any validation errors.In my opinion, this the search field functionality should be implemented as a simple
prefixIconorsuffixIconproperty onTextField, instead of making a whole new component for each possible type of icon we'd want to put inside aTextField.Related issues
148