fix: #297 input loses focus when changing isLoading

[Kysluss]

The issue was caused by the Input being wrapped by an InputGroup when the loading state needed to be shown and not being wrapped by an InputGroup when the loading state did not need to be shown.

This would cause the Input to lose focus causing a bad UX. We will now always render an InputGroup and pass the endElement prop based on the isLoading prop.

For consideration:

If you have a custom icon being displayed, the loading state will still display correctly but it looks weird because you will have 2 icons on top of each other. Because of this, I am considering removing the isLoading and loadingState props in v7. These should probably be external concerns that the users control themselves.

For what it's worth, the Chakra UI Combobox component functions this way where the loading state is something controlled and displayed externally.

https://chakra-ui.com/docs/components/combobox#async-loading

This fixes #297

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5de6bd9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[what-the-diff]

PR Summary

• Improved Loading State Indication in AutoCompleteInputComponent
  This change refine the way we indicate to users that data is being loaded in the 'AutoCompleteInputComponent'. We now handle the loading state information more efficiently, improving the overall user experience during data loading.

• Added Control Over Loading Icon Display
  We introduced a new variable, 'endElement', that allows us to choose which icon to display while data is being loaded - a general loading icon or a Spinner. This provides us with more flexibility in user interface design during data loading scenarios.

• Enhanced User Interface for Data Input
  We've rearranged our 'Input' component in our user interface to be housed in an 'InputGroup'. This enables us to display our new 'endElement' variable effectively to the user, thus improving the visual feedback users receive during data loading.