From 1f1024f4caa056cfe65a0ee214a0c519472867ff Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 7 Feb 2023 15:57:50 -0500 Subject: [PATCH] change default; #1175 --- src/components/checkbox/checkbox.ts | 3 +-- src/components/color-picker/color-picker.ts | 4 +--- src/components/input/input.ts | 4 +++- src/components/radio-group/radio-group.ts | 4 +--- src/components/range/range.ts | 1 - src/components/select/select.ts | 4 +++- src/components/switch/switch.ts | 3 +-- src/components/textarea/textarea.ts | 4 +++- src/internal/form.ts | 2 +- 9 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index c02817f6..893aa151 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -42,8 +42,7 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC private readonly formControlController = new FormControlController(this, { value: (control: SlCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SlCheckbox) => control.defaultChecked, - setValue: (control: SlCheckbox, checked: boolean) => (control.checked = checked), - assumeInteractionOn: ['sl-input'] + setValue: (control: SlCheckbox, checked: boolean) => (control.checked = checked) }); @query('input[type="checkbox"]') input: HTMLInputElement; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 29b0e283..2df8028a 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -90,9 +90,7 @@ declare const EyeDropper: EyeDropperConstructor; export default class SlColorPicker extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; - private readonly formControlController = new FormControlController(this, { - assumeInteractionOn: ['sl-input'] - }); + private readonly formControlController = new FormControlController(this); private isSafeValue = false; private readonly localize = new LocalizeController(this); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 491390ae..f2e65518 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -63,7 +63,9 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox'); export default class SlInput extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; - private readonly formControlController = new FormControlController(this); + private readonly formControlController = new FormControlController(this, { + assumeInteractionOn: ['sl-blur', 'sl-input'] + }); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); private readonly localize = new LocalizeController(this); diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 511826ef..ba1bca93 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -38,9 +38,7 @@ import type SlRadioButton from '../radio-button/radio-button'; export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; - protected readonly formControlController = new FormControlController(this, { - assumeInteractionOn: ['sl-input'] - }); + protected readonly formControlController = new FormControlController(this); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); private customValidityMessage = ''; private validationTimeout: number; diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 108183af..0375da6b 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -146,7 +146,6 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont } private handleThumbDragStart() { - this.focus(); // force Safari to focus so we can listen for the sl-blur interaction this.hasTooltip = true; } diff --git a/src/components/select/select.ts b/src/components/select/select.ts index c9c6c5bd..fb9dda60 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -64,7 +64,9 @@ import type SlPopup from '../popup/popup'; export default class SlSelect extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; - private readonly formControlController = new FormControlController(this); + private readonly formControlController = new FormControlController(this, { + assumeInteractionOn: ['sl-blur', 'sl-input'] + }); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); private readonly localize = new LocalizeController(this); private typeToSelectString = ''; diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index a4d9f88e..afdcf3ec 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -40,8 +40,7 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon private readonly formControlController = new FormControlController(this, { value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SlSwitch) => control.defaultChecked, - setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked), - assumeInteractionOn: ['sl-input'] + setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked) }); @query('input[type="checkbox"]') input: HTMLInputElement; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 0e82300c..11882593 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -37,7 +37,9 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element'; export default class SlTextarea extends ShoelaceElement implements ShoelaceFormControl { static styles: CSSResultGroup = styles; - private readonly formControlController = new FormControlController(this); + private readonly formControlController = new FormControlController(this, { + assumeInteractionOn: ['sl-blur', 'sl-input'] + }); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); private resizeObserver: ResizeObserver; diff --git a/src/internal/form.ts b/src/internal/form.ts index 30d9447e..9ae39229 100644 --- a/src/internal/form.ts +++ b/src/internal/form.ts @@ -78,7 +78,7 @@ export class FormControlController implements ReactiveController { disabled: input => input.disabled ?? false, reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true), setValue: (input, value: string) => (input.value = value), - assumeInteractionOn: ['sl-blur', 'sl-input'], + assumeInteractionOn: ['sl-input'], ...options }; this.handleFormData = this.handleFormData.bind(this);