Skip to content

Commit badff02

Browse files
siriwatknpsiriwatknp
committed
add freeSolo
1 parent edfdd3b commit badff02

File tree

1 file changed

+75
-50
lines changed

1 file changed

+75
-50
lines changed

‎docs/data/joy/components/autocomplete/Playground.js‎

Lines changed: 75 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -85,154 +85,167 @@ export default function Playground() {
8585
mt: 'var(--List-gap)',
8686
},
8787
[`& .${formControlClasses.root}`]: { position: 'initial', gap: 1.5 },
88+
'& > li': {
89+
alignItems: 'flex-start',
90+
},
8891
}}
8992
>
9093
<ListItem>
9194
<FormControl orientation="horizontal">
92-
<Checkbox overlay {...getCheckboxProps('disableCloseOnSelect')} />
95+
<Checkbox overlay {...getCheckboxProps('autoComplete')} />
9396
<div>
94-
<FormLabel>disableCloseOnSelect</FormLabel>
97+
<FormLabel>autoComplete</FormLabel>
9598
<FormHelperText>
96-
The popup won&apos;t close when a value is selected.
99+
The completion string, appears inline after the input cursor in the
100+
textbox. The inline completion string is visually highlighted and
101+
has a selected state.
97102
</FormHelperText>
98103
</div>
99104
</FormControl>
100105
</ListItem>
101106
<ListItem>
102107
<FormControl orientation="horizontal">
103-
<Checkbox overlay {...getCheckboxProps('clearOnEscape')} />
108+
<Checkbox overlay {...getCheckboxProps('autoHighlight')} />
104109
<div>
105-
<FormLabel>clearOnEscape</FormLabel>
110+
<FormLabel>autoHighlight</FormLabel>
106111
<FormHelperText>
107-
Clear all values when the user presses escape and the popup is
108-
closed.
112+
The first option is automatically highlighted.
109113
</FormHelperText>
110114
</div>
111115
</FormControl>
112116
</ListItem>
113117
<ListItem>
114118
<FormControl orientation="horizontal">
115-
<Checkbox overlay {...getCheckboxProps('disableClearable')} />
119+
<Checkbox overlay {...getCheckboxProps('autoSelect')} />
116120
<div>
117-
<FormLabel>disableClearable</FormLabel>
118-
<FormHelperText>The input can&apos;t be cleared</FormHelperText>
121+
<FormLabel>autoSelect</FormLabel>
122+
<FormHelperText>
123+
The selected option becomes the value of the input when the
124+
Autocomplete loses focus unless the user chooses a different option
125+
or changes the character string in the input.
126+
</FormHelperText>
119127
</div>
120128
</FormControl>
121129
</ListItem>
122130
<ListItem>
123131
<FormControl orientation="horizontal">
124-
<Checkbox overlay {...getCheckboxProps('includeInputInList')} />
132+
<Checkbox overlay {...getCheckboxProps('blurOnSelect')} />
125133
<div>
126-
<FormLabel>includeInputInList</FormLabel>
127-
<FormHelperText>The highlight can move to the input.</FormHelperText>
134+
<FormLabel>blurOnSelect</FormLabel>
135+
<FormHelperText>The input is always blurred.</FormHelperText>
128136
</div>
129137
</FormControl>
130138
</ListItem>
131139
<ListItem>
132140
<FormControl orientation="horizontal">
133-
<Checkbox overlay {...getCheckboxProps('autoComplete')} />
141+
<Checkbox overlay {...getCheckboxProps('clearOnBlur')} />
134142
<div>
135-
<FormLabel>autoComplete</FormLabel>
143+
<FormLabel>clearOnBlur</FormLabel>
136144
<FormHelperText>
137-
The completion string, appears inline after the input cursor in the
138-
textbox. The inline completion string is visually highlighted and
139-
has a selected state.
145+
The input&apos;s text is cleared on blur if no value is selected.
140146
</FormHelperText>
141147
</div>
142148
</FormControl>
143149
</ListItem>
144150
<ListItem>
145151
<FormControl orientation="horizontal">
146-
<Checkbox overlay {...getCheckboxProps('disableListWrap')} />
152+
<Checkbox overlay {...getCheckboxProps('clearOnEscape')} />
147153
<div>
148-
<FormLabel>disableListWrap</FormLabel>
154+
<FormLabel>clearOnEscape</FormLabel>
149155
<FormHelperText>
150-
The list box in the popup will not wrap focus.
156+
Clear all values when the user presses escape and the popup is
157+
closed.
151158
</FormHelperText>
152159
</div>
153160
</FormControl>
154161
</ListItem>
155162
<ListItem>
156163
<FormControl orientation="horizontal">
157-
<Checkbox overlay {...getCheckboxProps('openOnFocus')} />
164+
<Checkbox overlay {...getCheckboxProps('disabled')} />
158165
<div>
159-
<FormLabel>openOnFocus</FormLabel>
160-
<FormHelperText>The popup will open on input focus.</FormHelperText>
166+
<FormLabel>disabled</FormLabel>
167+
<FormHelperText>The component is disabled.</FormHelperText>
161168
</div>
162169
</FormControl>
163170
</ListItem>
164171
<ListItem>
165172
<FormControl orientation="horizontal">
166-
<Checkbox overlay {...getCheckboxProps('autoHighlight')} />
173+
<Checkbox overlay {...getCheckboxProps('disableClearable')} />
167174
<div>
168-
<FormLabel>autoHighlight</FormLabel>
175+
<FormLabel>disableClearable</FormLabel>
176+
<FormHelperText>The input can&apos;t be cleared</FormHelperText>
177+
</div>
178+
</FormControl>
179+
</ListItem>
180+
<ListItem>
181+
<FormControl orientation="horizontal">
182+
<Checkbox overlay {...getCheckboxProps('disableCloseOnSelect')} />
183+
<div>
184+
<FormLabel>disableCloseOnSelect</FormLabel>
169185
<FormHelperText>
170-
The first option is automatically highlighted.
186+
The popup won&apos;t close when a value is selected.
171187
</FormHelperText>
172188
</div>
173189
</FormControl>
174190
</ListItem>
175191
<ListItem>
176192
<FormControl orientation="horizontal">
177-
<Checkbox overlay {...getCheckboxProps('autoSelect')} />
193+
<Checkbox overlay {...getCheckboxProps('disableListWrap')} />
178194
<div>
179-
<FormLabel>autoSelect</FormLabel>
195+
<FormLabel>disableListWrap</FormLabel>
180196
<FormHelperText>
181-
The selected option becomes the value of the input when the
182-
Autocomplete loses focus unless the user chooses a different option
183-
or changes the character string in the input.
197+
The list box in the popup will not wrap focus.
184198
</FormHelperText>
185199
</div>
186200
</FormControl>
187201
</ListItem>
188202
<ListItem>
189203
<FormControl orientation="horizontal">
190-
<Checkbox overlay {...getCheckboxProps('disabled')} />
204+
<Checkbox overlay {...getCheckboxProps('filterSelectedOptions')} />
191205
<div>
192-
<FormLabel>disabled</FormLabel>
193-
<FormHelperText>The component is disabled.</FormHelperText>
206+
<FormLabel>filterSelectedOptions</FormLabel>
207+
<FormHelperText>
208+
Hide the selected option from the list box.
209+
</FormHelperText>
194210
</div>
195211
</FormControl>
196212
</ListItem>
197213
<ListItem>
198214
<FormControl orientation="horizontal">
199-
<Checkbox overlay {...getCheckboxProps('disablePortal')} />
215+
<Checkbox overlay {...getCheckboxProps('freeSolo')} />
200216
<div>
201-
<FormLabel>disablePortal</FormLabel>
217+
<FormLabel>freeSolo</FormLabel>
202218
<FormHelperText>
203-
The popup will be under the DOM hierarchy of the parent component.
219+
The user input is not bound to the provided options.
204220
</FormHelperText>
205221
</div>
206222
</FormControl>
207223
</ListItem>
208224
<ListItem>
209225
<FormControl orientation="horizontal">
210-
<Checkbox overlay {...getCheckboxProps('blurOnSelect')} />
226+
<Checkbox overlay {...getCheckboxProps('includeInputInList')} />
211227
<div>
212-
<FormLabel>blurOnSelect</FormLabel>
213-
<FormHelperText>The input is always blurred.</FormHelperText>
228+
<FormLabel>includeInputInList</FormLabel>
229+
<FormHelperText>The highlight can move to the input.</FormHelperText>
214230
</div>
215231
</FormControl>
216232
</ListItem>
217233
<ListItem>
218234
<FormControl orientation="horizontal">
219-
<Checkbox overlay {...getCheckboxProps('clearOnBlur')} />
235+
<Checkbox overlay {...getCheckboxProps('openOnFocus')} />
220236
<div>
221-
<FormLabel>clearOnBlur</FormLabel>
222-
<FormHelperText>
223-
The input&apos;s text is cleared on blur if no value is selected.
224-
</FormHelperText>
237+
<FormLabel>openOnFocus</FormLabel>
238+
<FormHelperText>The popup will open on input focus.</FormHelperText>
225239
</div>
226240
</FormControl>
227241
</ListItem>
228242
<ListItem>
229243
<FormControl orientation="horizontal">
230-
<Checkbox overlay {...getCheckboxProps('selectOnFocus')} />
244+
<Checkbox overlay {...getCheckboxProps('disablePortal')} />
231245
<div>
232-
<FormLabel>selectOnFocus</FormLabel>
246+
<FormLabel>disablePortal</FormLabel>
233247
<FormHelperText>
234-
The input&apos;s text is selected on focus. It helps the user clear
235-
the selected value.
248+
The popup will be under the DOM hierarchy of the parent component.
236249
</FormHelperText>
237250
</div>
238251
</FormControl>
@@ -249,6 +262,18 @@ export default function Playground() {
249262
</div>
250263
</FormControl>
251264
</ListItem>
265+
<ListItem>
266+
<FormControl orientation="horizontal">
267+
<Checkbox overlay {...getCheckboxProps('selectOnFocus')} />
268+
<div>
269+
<FormLabel>selectOnFocus</FormLabel>
270+
<FormHelperText>
271+
The input&apos;s text is selected on focus. It helps the user clear
272+
the selected value.
273+
</FormHelperText>
274+
</div>
275+
</FormControl>
276+
</ListItem>
252277
</List>
253278
</Box>
254279
</Box>

0 commit comments

Comments
 (0)