Skip to content

Commit

Permalink
fix!: prevent Safari AutoFill to avoid click issues (#7619)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen authored Aug 8, 2024
1 parent f0d1a11 commit f10c4de
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 87 deletions.
1 change: 1 addition & 0 deletions packages/component-base/src/slot-controller.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export class SlotController extends EventTarget implements ReactiveController {
multiple?: boolean;
observe?: boolean;
useUniqueId?: boolean;
uniqueIdPrefix?: string;
initializer?(host: HTMLElement, node: HTMLElement): void;
},
);
Expand Down
7 changes: 3 additions & 4 deletions packages/component-base/src/slot-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ export class SlotController extends EventTarget {
* @return {string}
* @protected
*/
static generateId(host, slotName) {
const prefix = slotName || 'default';
static generateId(host, prefix = 'default') {
return `${prefix}-${host.localName}-${generateUniqueId()}`;
}

constructor(host, slotName, tagName, config = {}) {
super();

const { initializer, multiple, observe, useUniqueId } = config;
const { initializer, multiple, observe, useUniqueId, uniqueIdPrefix } = config;

this.host = host;
this.slotName = slotName;
Expand All @@ -42,7 +41,7 @@ export class SlotController extends EventTarget {

// Only generate the default ID if requested by the controller.
if (useUniqueId) {
this.defaultId = this.constructor.generateId(host, slotName);
this.defaultId = this.constructor.generateId(host, uniqueIdPrefix || slotName);
}
}

Expand Down
21 changes: 15 additions & 6 deletions packages/date-picker/src/vaadin-date-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,12 +213,21 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
super.ready();

this.addController(
new InputController(this, (input) => {
this._setInputElement(input);
this._setFocusElement(input);
this.stateTarget = input;
this.ariaTarget = input;
}),
new InputController(
this,
(input) => {
this._setInputElement(input);
this._setFocusElement(input);
this.stateTarget = input;
this.ariaTarget = input;
},
{
// The "search" word is a trick to prevent Safari from enabling AutoFill,
// which is causing click issues:
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
uniqueIdPrefix: 'search-input',
},
),
);
this.addController(new LabelledInputController(this.inputElement, this._labelController));

Expand Down
40 changes: 20 additions & 20 deletions packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const snapshots = {};
snapshots["vaadin-date-picker host default"] =
`<vaadin-date-picker>
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -19,7 +19,7 @@ snapshots["vaadin-date-picker host default"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
role="combobox"
slot="input"
>
Expand All @@ -33,7 +33,7 @@ snapshots["vaadin-date-picker host disabled"] =
disabled=""
>
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -49,7 +49,7 @@ snapshots["vaadin-date-picker host disabled"] =
aria-haspopup="dialog"
autocomplete="off"
disabled=""
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
role="combobox"
slot="input"
tabindex="-1"
Expand All @@ -61,7 +61,7 @@ snapshots["vaadin-date-picker host disabled"] =
snapshots["vaadin-date-picker host placeholder"] =
`<vaadin-date-picker placeholder="Placeholder">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -76,7 +76,7 @@ snapshots["vaadin-date-picker host placeholder"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
placeholder="Placeholder"
role="combobox"
slot="input"
Expand All @@ -88,7 +88,7 @@ snapshots["vaadin-date-picker host placeholder"] =
snapshots["vaadin-date-picker host readonly"] =
`<vaadin-date-picker readonly="">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -103,7 +103,7 @@ snapshots["vaadin-date-picker host readonly"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
readonly=""
role="combobox"
slot="input"
Expand All @@ -115,7 +115,7 @@ snapshots["vaadin-date-picker host readonly"] =
snapshots["vaadin-date-picker host required"] =
`<vaadin-date-picker required="">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -130,7 +130,7 @@ snapshots["vaadin-date-picker host required"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
required=""
role="combobox"
slot="input"
Expand All @@ -142,7 +142,7 @@ snapshots["vaadin-date-picker host required"] =
snapshots["vaadin-date-picker host label"] =
`<vaadin-date-picker has-label="">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -159,7 +159,7 @@ snapshots["vaadin-date-picker host label"] =
aria-haspopup="dialog"
aria-labelledby="label-vaadin-date-picker-0"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
role="combobox"
slot="input"
>
Expand All @@ -170,7 +170,7 @@ snapshots["vaadin-date-picker host label"] =
snapshots["vaadin-date-picker host helper"] =
`<vaadin-date-picker has-helper="">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -186,7 +186,7 @@ snapshots["vaadin-date-picker host helper"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
role="combobox"
slot="input"
>
Expand All @@ -206,7 +206,7 @@ snapshots["vaadin-date-picker host error"] =
invalid=""
>
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -224,7 +224,7 @@ snapshots["vaadin-date-picker host error"] =
aria-haspopup="dialog"
aria-invalid="true"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
invalid=""
role="combobox"
slot="input"
Expand All @@ -236,7 +236,7 @@ snapshots["vaadin-date-picker host error"] =
snapshots["vaadin-date-picker host name"] =
`<vaadin-date-picker name="Field Name">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -251,7 +251,7 @@ snapshots["vaadin-date-picker host name"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
name="Field Name"
role="combobox"
slot="input"
Expand All @@ -263,7 +263,7 @@ snapshots["vaadin-date-picker host name"] =
snapshots["vaadin-date-picker host value"] =
`<vaadin-date-picker has-value="">
<label
for="input-vaadin-date-picker-3"
for="search-input-vaadin-date-picker-3"
id="label-vaadin-date-picker-0"
slot="label"
>
Expand All @@ -278,7 +278,7 @@ snapshots["vaadin-date-picker host value"] =
aria-expanded="false"
aria-haspopup="dialog"
autocomplete="off"
id="input-vaadin-date-picker-3"
id="search-input-vaadin-date-picker-3"
role="combobox"
slot="input"
>
Expand Down
Loading

0 comments on commit f10c4de

Please sign in to comment.