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.

Sign up for GitHub

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

fix: associate labels with autosuggest input #2755

Merged
merged 1 commit into from
Dec 19, 2023
+112 −77
Merged

fix: associate labels with autosuggest input #2755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/Form/FormAutosuggest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
import { useIntl } from 'react-intl';
import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
import Icon from '../Icon';
import FormGroup from './FormGroup';
import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
import FormControl from './FormControl';
import FormControlFeedback from './FormControlFeedback';
import IconButton from '../IconButton';
Expand Down Expand Up @@ -239,12 +239,18 @@ function FormAutosuggest({
setDisplayValue(e.target.value);
};

const { getControlProps } = useFormGroupContext();
const controlProps = getControlProps(props);

return (
<div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
<div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
{`${state.dropDownItems.length} options found`}
</div>
<FormGroup isInvalid={!!state.errorMessage}>
<FormGroupContextProvider
controlId={controlProps.id}
isInvalid={!!state.errorMessage}
>
<FormControl
ref={formControlRef}
aria-expanded={(state.dropDownItems.length > 0).toString()}
Expand All @@ -259,7 +265,7 @@ function FormAutosuggest({
onClick={handleClick}
trailingElement={iconToggle}
data-testid="autosuggest-textbox-input"
{...props}
{...controlProps}
/>

{helpMessage && !state.errorMessage && (
Expand All @@ -269,11 +275,11 @@ function FormAutosuggest({
)}

{state.errorMessage && (
<FormControlFeedback type="invalid" feedback-for={props.name}>
<FormControlFeedback type="invalid" feedback-for={controlProps.name}>
{errorMessageText}
</FormControlFeedback>
)}
</FormGroup>
</FormGroupContextProvider>

<ul
id="pgn__form-autosuggest__dropdown-box"
Expand Down
152 changes: 80 additions & 72 deletions src/Form/form-autosuggest.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,93 +19,101 @@ Form auto-suggest enables users to manually select or type to find matching opti

```jsx live
() => {
const [selected, setSelected] = useState('');
const [selected, setSelected] = useState('');

return (
<Form.Autosuggest
floatingLabel="Programming language"
aria-label="form autosuggest"
helpMessage="Select language"
errorMessageText="Error, no selected value"
value={selected}
onSelected={(value) => setSelected(value)}
>
<Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
<Form.AutosuggestOption>Python</Form.AutosuggestOption>
<Form.AutosuggestOption>Rube</Form.AutosuggestOption>
<Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
Option with custom onClick
</Form.AutosuggestOption>
</Form.Autosuggest>
);
}
return (
<Form.Group>
<Form.Label>
<h4>Programming language</h4>
</Form.Label>
<Form.Autosuggest
aria-label="form autosuggest"
helpMessage="Select language"
errorMessageText="Error, no selected value"
value={selected}
onSelected={(value) => setSelected(value)}
>
<Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
<Form.AutosuggestOption>Python</Form.AutosuggestOption>
<Form.AutosuggestOption>Rube</Form.AutosuggestOption>
<Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
Option with custom onClick
</Form.AutosuggestOption>
</Form.Autosuggest>
</Form.Group>
);
};
```

## Search Usage

```jsx live
() => {
const [selected, setSelected] = useState('');
const [selected, setSelected] = useState('');

return (
<Form.Autosuggest
placeholder="Type 'T'"
aria-label="form autosuggest"
errorMessageText="Error, no selected value"
helpMessage="Select language"
value={selected}
onSelected={(value) => setSelected(value)}
>
<Form.AutosuggestOption>PHP</Form.AutosuggestOption>
<Form.AutosuggestOption>Java</Form.AutosuggestOption>
<Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
<Form.AutosuggestOption>Flask</Form.AutosuggestOption>
</Form.Autosuggest>
);
}
return (
<Form.Autosuggest
placeholder="Type 'T'"
aria-label="form autosuggest"
errorMessageText="Error, no selected value"
helpMessage="Select language"
value={selected}
onSelected={(value) => setSelected(value)}
>
<Form.AutosuggestOption>PHP</Form.AutosuggestOption>
<Form.AutosuggestOption>Java</Form.AutosuggestOption>
<Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
<Form.AutosuggestOption>Flask</Form.AutosuggestOption>
</Form.Autosuggest>
);
};
```

## Loading state

```jsx live
() => {
const [data, setData] = useState([]);
const [showLoading, setShowLoading] = useState(false);
const [data, setData] = useState([]);
const [showLoading, setShowLoading] = useState(false);

useEffect(() => {
setShowLoading(true);
fetch('https://api.sampleapis.com/coffee/hot')
.then(data => data.json())
.then(items => {
setTimeout(() => {
setData(items);
setShowLoading(false);
}, 1500);
});
}, [])
useEffect(() => {
setShowLoading(true);
fetch('https://api.sampleapis.com/coffee/hot')
.then(data => data.json())
.then(items => {
setTimeout(() => {
setData(items);
setShowLoading(false);
}, 1500);
});
}, []);

const searchCoffee = (title) => {
setShowLoading(true);
fetch('https://api.sampleapis.com/coffee/hot')
.then(data => data.json())
.then(items => setTimeout(() => {
const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
setShowLoading(false);
if (filteredCoffee) { return filteredCoffee }
return { ...title, filteredCoffee }
}, 1500));
};
const searchCoffee = (title) => {
setShowLoading(true);
fetch('https://api.sampleapis.com/coffee/hot')
.then(data => data.json())
.then(items => setTimeout(() => {
const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
setShowLoading(false);
if (filteredCoffee) { return filteredCoffee; }
return { ...title, filteredCoffee };
}, 1500));
};

return (
<Form.Autosuggest
isLoading={showLoading}
placeholder="This is placeholder"
floatingLabel="This is floating label"
screenReaderText="Loading..."
onChange={searchCoffee}
>
{data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
</Form.Autosuggest>
);
}
return (
<Form.Group>
<Form.Label>
<h4>Café API</h4>
</Form.Label>
<Form.Autosuggest
isLoading={showLoading}
placeholder="This is placeholder"
screenReaderText="Loading..."
onChange={searchCoffee}
>
{data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
</Form.Autosuggest>
</Form.Group>
);
};
```
21 changes: 21 additions & 0 deletions src/Form/tests/FormAutosuggest.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
import { IntlProvider } from 'react-intl';
import FormAutosuggest from '../FormAutosuggest';
import FormAutosuggestOption from '../FormAutosuggestOption';
import FormGroup from '../FormGroup';
import FormLabel from '../FormLabel';

function FormAutosuggestWrapper(props) {
return (
Expand All @@ -31,6 +33,19 @@ function FormAutosuggestTestComponent(props) {
);
}

function FormAutosuggestLabelTestComponent() {
return (
<FormGroup>
<FormLabel data-testid="autosuggest-label">
<h3>Label</h3>
</FormLabel>
<FormAutosuggestWrapper>
<FormAutosuggestOption>Option</FormAutosuggestOption>
</FormAutosuggestWrapper>
</FormGroup>
);
}

FormAutosuggestTestComponent.defaultProps = {
onSelected: jest.fn(),
onClick: jest.fn(),
Expand Down Expand Up @@ -112,6 +127,12 @@ describe('render behavior', () => {

expect(getByText('3 options found')).toBeInTheDocument();
});

it('associates labels with the input textbox', () => {
const { getByTestId } = render(<FormAutosuggestLabelTestComponent />);

expect(getByTestId('autosuggest-label').getAttribute('for')).toEqual(getByTestId('autosuggest-textbox-input').getAttribute('id'));
});
});

describe('controlled behavior', () => {
Expand Down