Skip to content

Commit fe9ae9c

Browse files
mdodgelookermdodgelooker
authored
Fix: InputText autoComplete (#390)
* autocomplete -> autoComplete * Update changelog * Fix aria-autocomplete * Fix select with no options
1 parent 7d1be9a commit fe9ae9c

File tree

11 files changed

+54
-32
lines changed

11 files changed

+54
-32
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8-
## [UNRELEASE]
8+
## [UNRELEASED]
99

1010
### Added
1111

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
### Fixed
1515

1616
- Bad `aria-labelledby` attribute on `MenuList` when used without `Menu`.
17+
- `autoComplete` not being passed down to `input` in `InputText`.
1718

1819
## [0.7.11] - 2020-01-09
1920

‎packages/components/src/Form/Fields/FieldSelect/FieldSelect.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ test('Should trigger onChange handler', () => {
8080
id="thumbs-up"
8181
value="foobar"
8282
onChange={handleChange}
83+
options={[{ label: 'Foobar', value: 'foobar' }]}
8384
/>
8485
</ThemeProvider>
8586
)

‎packages/components/src/Form/Fields/FieldSelect/__snapshots__/FieldSelect.test.tsx.snap‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,12 +122,13 @@ exports[`A FieldSelect 1`] = `
122122
width="100%"
123123
>
124124
<div
125-
aria-autocomplete="both"
126125
className="c3 c4 c5"
127126
onClick={[Function]}
128127
width="100%"
129128
>
130129
<input
130+
aria-autocomplete="both"
131+
autoComplete="off"
131132
className="c6 c7"
132133
id="listbox-thumbs-up"
133134
onBlur={[Function]}
@@ -311,12 +312,13 @@ exports[`A FieldSelect with an error validation aligned to the left 1`] = `
311312
width="100%"
312313
>
313314
<div
314-
aria-autocomplete="both"
315315
className="c4 c5 c6"
316316
onClick={[Function]}
317317
width="100%"
318318
>
319319
<input
320+
aria-autocomplete="both"
321+
autoComplete="off"
320322
className="c7 c8"
321323
id="listbox-thumbs-up"
322324
onBlur={[Function]}
@@ -504,12 +506,13 @@ exports[`A FieldSelect with an error validation aligned to the right 1`] = `
504506
width="100%"
505507
>
506508
<div
507-
aria-autocomplete="both"
508509
className="c4 c5 c6"
509510
onClick={[Function]}
510511
width="100%"
511512
>
512513
<input
514+
aria-autocomplete="both"
515+
autoComplete="off"
513516
className="c7 c8"
514517
id="listbox-thumbs-up"
515518
onBlur={[Function]}
@@ -668,12 +671,13 @@ exports[`A required FieldSelect 1`] = `
668671
width="100%"
669672
>
670673
<div
671-
aria-autocomplete="both"
672674
className="c4 c5 c6"
673675
onClick={[Function]}
674676
width="100%"
675677
>
676678
<input
679+
aria-autocomplete="both"
680+
autoComplete="off"
677681
className="c7 c8"
678682
id="listbox-thumbs-up"
679683
onBlur={[Function]}
@@ -813,12 +817,13 @@ exports[`FieldSelect supports labelWeight 1`] = `
813817
width="100%"
814818
>
815819
<div
816-
aria-autocomplete="both"
817820
className="c3 c4 c5"
818821
onClick={[Function]}
819822
width="100%"
820823
>
821824
<input
825+
aria-autocomplete="both"
826+
autoComplete="off"
822827
className="c6 c7"
823828
id="listbox-thumbs-up"
824829
onBlur={[Function]}

‎packages/components/src/Form/Inputs/Combobox/Combobox.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,15 +143,15 @@ describe('Keyboard navigation', () => {
143143
expect(queryByRole('listbox')).not.toBeInTheDocument()
144144
})
145145

146-
test('arrows and enter with autocomplete = false', () => {
146+
test('arrows and enter with autoComplete = false', () => {
147147
const {
148148
getAllByRole,
149149
getByRole,
150150
queryByRole,
151151
getByTestId,
152152
} = renderWithTheme(
153153
<Combobox id="with-options" openOnFocus>
154-
<ComboboxInput data-testid="select-input" autocomplete={false} />
154+
<ComboboxInput data-testid="select-input" autoComplete={false} />
155155
<ComboboxList>
156156
<ComboboxOption label="Foo" value="101" />
157157
<ComboboxOption label="Bar" value="102" />

‎packages/components/src/Form/Inputs/Combobox/Combobox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,13 +141,13 @@ export const ComboboxInternal = forwardRef(function Combobox(
141141

142142
const buttonRef = useRef<HTMLButtonElement>(null)
143143

144-
// When <ComboboxInput autocomplete={false} /> we don't want cycle back to
144+
// When <ComboboxInput autoComplete={false} /> we don't want cycle back to
145145
// the user's value while navigating (because it's always the user's value),
146146
// but we need to know this in useKeyDown which is far away from the prop
147147
// here, so we do something sneaky and write it to this ref on context so we
148148
// can use it anywhere else 😛. Another new trick for me and I'm excited
149149
// about this one too!
150-
const autocompletePropRef = useRef(true)
150+
const autoCompletePropRef = useRef(true)
151151
const readOnlyPropRef = useRef(false)
152152

153153
const persistSelectionRef = useRef(false)
@@ -188,7 +188,7 @@ export const ComboboxInternal = forwardRef(function Combobox(
188188
}, [isVisible, isVisibleRef, onOpen, onClose, option])
189189

190190
const context = {
191-
autocompletePropRef,
191+
autoCompletePropRef,
192192
buttonRef,
193193
data,
194194
inputCallbackRef,

‎packages/components/src/Form/Inputs/Combobox/ComboboxContext.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface ComboboxContextProps {
3939
state?: ComboboxState
4040
transition?: ComboboxTransition
4141
listboxId?: string
42-
autocompletePropRef?: MutableRefObject<boolean>
42+
autoCompletePropRef?: MutableRefObject<boolean>
4343
persistSelectionRef?: MutableRefObject<boolean>
4444
readOnlyPropRef?: MutableRefObject<boolean>
4545
isVisible?: boolean

‎packages/components/src/Form/Inputs/Combobox/ComboboxInput.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ import { ComboboxContext } from './ComboboxContext'
4545
import { getComboboxText } from './ComboboxOption'
4646
import { ComboboxActionType, ComboboxState } from './state'
4747

48-
export interface ComboboxInputProps extends InputSearchProps {
48+
export interface ComboboxInputProps
49+
extends Omit<InputSearchProps, 'autoComplete'> {
4950
/**
5051
* If true, when the user clicks inside the text box the current value will
5152
* be selected. Use this if the user is likely to delete all the text anyway
@@ -66,7 +67,7 @@ export interface ComboboxInputProps extends InputSearchProps {
6667
* But if your input is more like a normal `<input type="text"/>`, then leave
6768
* the `true` default.
6869
*/
69-
autocomplete?: boolean
70+
autoComplete?: boolean
7071
}
7172

7273
export const ComboboxInputInternal = forwardRef(function ComboboxInput(
@@ -75,7 +76,7 @@ export const ComboboxInputInternal = forwardRef(function ComboboxInput(
7576
selectOnClick = false,
7677

7778
// updates the value in the input when navigating w/ the keyboard
78-
autocomplete = true,
79+
autoComplete = true,
7980
readOnly = false,
8081

8182
// wrapped events
@@ -105,7 +106,7 @@ export const ComboboxInputInternal = forwardRef(function ComboboxInput(
105106
state,
106107
transition,
107108
listboxId,
108-
autocompletePropRef,
109+
autoCompletePropRef,
109110
persistSelectionRef,
110111
readOnlyPropRef,
111112
openOnFocus,
@@ -128,10 +129,10 @@ export const ComboboxInputInternal = forwardRef(function ComboboxInput(
128129
const isInputting = useRef(false)
129130

130131
useLayoutEffect(() => {
131-
if (autocompletePropRef) autocompletePropRef.current = autocomplete
132+
if (autoCompletePropRef) autoCompletePropRef.current = autoComplete
132133
if (readOnlyPropRef) readOnlyPropRef.current = readOnly
133134
// eslint-disable-next-line react-hooks/exhaustive-deps
134-
}, [autocomplete, readOnly])
135+
}, [autoComplete, readOnly])
135136

136137
function handleClear() {
137138
contextOnChange && contextOnChange()
@@ -212,7 +213,7 @@ export const ComboboxInputInternal = forwardRef(function ComboboxInput(
212213
let inputOption = contextInputValue !== undefined ? contextInputValue : option
213214

214215
if (
215-
autocomplete &&
216+
autoComplete &&
216217
(state === ComboboxState.NAVIGATING || state === ComboboxState.INTERACTING)
217218
) {
218219
// When idle, we don't have a navigationOption on ArrowUp/Down
@@ -242,6 +243,7 @@ export const ComboboxInputInternal = forwardRef(function ComboboxInput(
242243
onChange={wrappedOnChange}
243244
onKeyDown={wrappedOnKeyDown}
244245
id={listboxId}
246+
autoComplete="off"
245247
aria-autocomplete="both"
246248
aria-activedescendant={
247249
navigationOption

‎packages/components/src/Form/Inputs/Combobox/helpers.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function useKeyDown() {
6363
optionsRef,
6464
state,
6565
transition,
66-
autocompletePropRef,
66+
autoCompletePropRef,
6767
persistSelectionRef,
6868
readOnlyPropRef,
6969
} = useContext(ComboboxContext)
@@ -96,7 +96,7 @@ export function useKeyDown() {
9696
: -1
9797
const atBottom = index === options.length - 1
9898
if (atBottom) {
99-
if (autocompletePropRef && autocompletePropRef.current) {
99+
if (autoCompletePropRef && autoCompletePropRef.current) {
100100
// Go back to the value the user has typed because we are
101101
// auto-completing and they need to be able to get back to what
102102
// they had typed w/o having to backspace out.
@@ -136,7 +136,7 @@ export function useKeyDown() {
136136
? findIndex(options, navigationOption)
137137
: -1
138138
if (index === 0) {
139-
if (autocompletePropRef && autocompletePropRef.current) {
139+
if (autoCompletePropRef && autoCompletePropRef.current) {
140140
// Go back to the value the user has typed because we are
141141
// auto-completing and they need to be able to get back to what
142142
// they had typed w/o having to backspace out.

‎packages/components/src/Form/Inputs/InputProps.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export interface InputProps extends CompatibleHTMLProps<HTMLInputElement> {
3333

3434
export const inputPropKeys = [
3535
'accept',
36-
'autofocus',
37-
'autocomplete',
36+
'autoFocus',
37+
'autoComplete',
3838
'checked',
3939
'data-autofocus',
4040
'data-testid',
@@ -67,6 +67,7 @@ export const inputPropKeys = [
6767
'pattern',
6868
'step',
6969
'value',
70+
'aria-autocomplete',
7071
'aria-label',
7172
'aria-describedby',
7273
'aria-labelledby',

‎packages/components/src/Form/Inputs/InputText/InputText.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,19 @@ export interface InputTextProps
6464
*
6565
* @default 'text'
6666
*/
67-
type?: 'number' | 'password' | 'text' | 'search'
67+
type?:
68+
| 'date'
69+
| 'datetime-local'
70+
| 'email'
71+
| 'month'
72+
| 'number'
73+
| 'password'
74+
| 'search'
75+
| 'tel'
76+
| 'text'
77+
| 'time'
78+
| 'url'
79+
| 'week'
6880
}
6981

7082
const InputComponent = forwardRef(

0 commit comments

Comments
 (0)