change default; #1175

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;

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);
 

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);
 

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;

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;
   }
 

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 = '';

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;

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;
 

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);