Skip to content

Commit

Permalink
fix: disable browser autocomplete and edit dropdown items elements
Browse files Browse the repository at this point in the history
Add attributes to `input` element to disable browser autocomplete on autosuggest component and change the div that houses the dropdown items to be a `ul`, change the button elements that render the list to be `li`. add new `role` to each element
  • Loading branch information
httpsmenahassan committed Aug 9, 2023
1 parent f5fb6c9 commit 366f068
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 8 deletions.
16 changes: 9 additions & 7 deletions src/Form/FormAutosuggest.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function FormAutosuggest({
});

const handleItemClick = (e, onClick) => {
const clickedValue = e.currentTarget.value;
const clickedValue = e.currentTarget.getAttribute('data-value')

Check failure on line 42 in src/Form/FormAutosuggest.jsx

View workflow job for this annotation

GitHub Actions / tests

Missing semicolon

if (onSelected && clickedValue !== value) {
onSelected(clickedValue);
Expand All @@ -66,7 +66,7 @@ function FormAutosuggest({
return React.cloneElement(child, {
...rest,
children,
value: children,
'data-value': children,
onClick: (e) => handleItemClick(e, onClick),
});
});
Expand Down Expand Up @@ -95,6 +95,7 @@ function FormAutosuggest({
...prevState,
...newState,
}));

Check failure on line 97 in src/Form/FormAutosuggest.jsx

View workflow job for this annotation

GitHub Actions / tests

Block must not be padded by blank lines

};

const iconToggle = (
Expand Down Expand Up @@ -219,6 +220,9 @@ function FormAutosuggest({
<FormControl
aria-expanded={(state.dropDownItems.length > 0).toString()}
aria-owns="pgn__form-autosuggest__dropdown-box"
role="combobox"
aria-autocomplete="list"
autoComplete="off"
value={state.displayValue}
aria-invalid={state.errorMessage}
onChange={handleOnChange}
Expand All @@ -240,16 +244,17 @@ function FormAutosuggest({
)}
</FormGroup>

<div
<ul
id="pgn__form-autosuggest__dropdown-box"
className="pgn__form-autosuggest__dropdown"
role="listbox"
>
{isLoading ? (
<div className="pgn__form-autosuggest__dropdown-loading">
<Spinner animation="border" variant="dark" screenReaderText={screenReaderText} />
</div>
) : state.dropDownItems.length > 0 && state.dropDownItems}
</div>
</ul>
</div>
);
}
Expand All @@ -258,7 +263,6 @@ FormAutosuggest.defaultProps = {
arrowKeyNavigationSelector: 'a:not(:disabled),button:not(:disabled, .btn-icon),input:not(:disabled)',
ignoredArrowKeysNames: ['ArrowRight', 'ArrowLeft'],
isLoading: false,
role: 'list',
className: null,
floatingLabel: null,
onChange: null,
Expand All @@ -283,8 +287,6 @@ FormAutosuggest.propTypes = {
ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string),
/** Specifies loading state. */
isLoading: PropTypes.bool,
/** An ARIA role describing the form autosuggest. */
role: PropTypes.string,
/** Specifies class name to append to the base element. */
className: PropTypes.string,
/** Specifies floating label to display for the input component. */
Expand Down
2 changes: 2 additions & 0 deletions src/Form/FormAutosuggestOption.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ function FormAutosuggestOption({
}) {
return (
<MenuItem
as="li"
role="option"
onClick={onClick}
className={classNames(className, 'dropdown-item')}
{...props}
Expand Down
1 change: 1 addition & 0 deletions src/Form/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -586,6 +586,7 @@ select.form-control {
width: calc(100% - .5rem);
z-index: $zindex-dropdown;
top: 3.125rem;
padding: 0;

.dropdown-item {
display: block;
Expand Down
2 changes: 1 addition & 1 deletion src/Form/form-autosuggest.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Form auto-suggest enables users to manually select or type to find matching opti
<Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
<Form.AutosuggestOption>Python</Form.AutosuggestOption>
<Form.AutosuggestOption>Rube</Form.AutosuggestOption>
<Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.value)}>
<Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
Option with custom onClick
</Form.AutosuggestOption>
</Form.Autosuggest>
Expand Down
1 change: 1 addition & 0 deletions src/Menu/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,4 @@
position: relative;
}
}

0 comments on commit 366f068

Please sign in to comment.