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.

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

react-components: Add Autocomplete component #161

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

MarikTar
Copy link
Contributor

Add new Autocomplete component

@MarikTar MarikTar self-assigned this Sep 26, 2024
@MarikTar MarikTar changed the base branch from main to mariktar/add-pv-designe-system-autocompleate September 26, 2024 14:21
Base automatically changed from mariktar/add-pv-designe-system-autocompleate to main September 26, 2024 16:34
…into mariktar/add-new-autocoplete-component
@MarikTar MarikTar force-pushed the mariktar/add-new-autocoplete-component branch from f5beeae to 2667d50 Compare September 30, 2024 08:23
@@ -525,6 +527,20 @@ Multiple extends boolean | undefined = false,
selectNewValue(event, option, index, 'removeOption');
};

const handleDeleteAllValues = (event: React.SyntheticEvent) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Let's use the getClearProps instead and group clear props together.

*
*/

export const Autocomplete = <
Copy link
Collaborator

Choose a reason for hiding this comment

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

Check the clear button. There is in the mockups, but there is no implementation.

Screenshot 2024-09-30 at 12 01 42

className,
size,
placeholder,
label,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Something happened with the field label. Clicking on the label does not focus the field.

image

size,
placeholder,
label,
disabled = false,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Turning off the component (disabled=true) also has no effect. The component is not blocked and continues to work.

}
};

const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

When the tab is used, the component menu opens and stops working with the keyboard.
Reproduce:

  1. Make sure that the component is not in focus, click on tab. The component must be in focus.
  2. Click the tab again. The component menu opens, the focus disappears and the component itself does not respond to other keys.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants