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

feat(component): add autoComplete prop for selects #542

Merged
merged 1 commit into from
May 18, 2021
Merged

feat(component): add autoComplete prop for selects #542

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
4 changes: 3 additions & 1 deletion packages/big-design/src/components/MultiSelect/MultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { MultiSelectProps } from './types';
export const MultiSelect = typedMemo(
<T extends unknown>({
action,
autoComplete = 'off',
autoWidth = false,
className,
disabled,
Expand Down Expand Up @@ -314,7 +315,7 @@ export const MultiSelect = typedMemo(
<Input
{...getInputProps({
...props,
autoComplete: 'off',
autoComplete,
disabled,
onClick: () => {
!isOpen && openMenu();
Expand Down Expand Up @@ -359,6 +360,7 @@ export const MultiSelect = typedMemo(
</StyledInputContainer>
);
}, [
autoComplete,
disabled,
filterable,
getInputProps,
Expand Down
1 change: 1 addition & 0 deletions packages/big-design/src/components/MultiSelect/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { SelectOptionGroup } from '../Select/types';

interface BaseSelect extends Omit<React.HTMLAttributes<HTMLInputElement>, 'children'> {
action?: SelectAction;
autoComplete?: string;
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you check that this is not on React.HTMLAttributes<HTMLInputElement>?

Copy link
Contributor Author

@jorgemoya jorgemoya May 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

It isn't, I would need to use AllHTMLAttributes

Copy link
Contributor

@chanceaclark chanceaclark May 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Ah makes sense. We'd probably want to do this for the Form component too then. (it's only on | off for the form element).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I assume it defaults to on on the form?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep

Copy link
Contributor Author

Choose a reason for hiding this comment

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

FormHTMLAttributes does have autoComplete

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm, I could swap the type of the Selects for <React.InputHTMLAttributes<HTMLInputElement> which do include autoComplete and a bunch of others

Copy link
Contributor

Choose a reason for hiding this comment

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

🤔

Only thing we need to make sure if we do, is that the types we say we allow (for example, valid input attributes like any aria- ones, or the multiple attribute) are actually passed in to the underlying component. We don't want our types to say we have something that our component doesn't actually implement.

Full list of input attributes

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Lets keep as is since I don't want to expose all those to the user.

autoWidth?: boolean;
description?: React.ReactChild;
disabled?: boolean;
Expand Down
4 changes: 3 additions & 1 deletion packages/big-design/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { SelectAction } from '../Select/types';
export const Select = typedMemo(
<T extends unknown>({
action,
autoComplete = 'off',
autoWidth = false,
className,
disabled,
Expand Down Expand Up @@ -235,7 +236,7 @@ export const Select = typedMemo(
<Input
{...getInputProps({
...props,
autoComplete: 'off',
autoComplete,
disabled,
onClick: () => {
!isOpen && openMenu();
Expand Down Expand Up @@ -276,6 +277,7 @@ export const Select = typedMemo(
</StyledInputContainer>
);
}, [
autoComplete,
closeMenu,
disabled,
filterable,
Expand Down
1 change: 1 addition & 0 deletions packages/big-design/src/components/Select/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { InputProps } from '../Input';

interface BaseSelect extends Omit<React.HTMLAttributes<HTMLInputElement>, 'children' | 'value'> {
action?: SelectAction;
autoComplete?: string;
autoWidth?: boolean;
description?: React.ReactChild;
disabled?: boolean;
Expand Down
6 changes: 6 additions & 0 deletions packages/docs/PropTables/MultiSelectPropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ const selectProps: Prop[] = [
types: 'SelectAction',
description: 'Action option displayed at the end of the list.',
},
{
name: 'autoComplete',
defaultValue: 'off',
types: 'string',
description: 'Set the autoComplete property for the input.',
},
{
name: 'description',
types: 'string | FormControlDescription',
Expand Down
6 changes: 6 additions & 0 deletions packages/docs/PropTables/SelectPropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ const selectProps: Prop[] = [
types: 'SelectAction',
description: 'Action option displayed at the end of the list.',
},
{
name: 'autoComplete',
defaultValue: 'off',
types: 'string',
description: 'Set the autoComplete property for the input.',
},
{
name: 'description',
types: 'string | FormControlDescription',
Expand Down