fixes #480

docs/resources/changelog.md

@@ -16,6 +16,7 @@ This release improves how component dependencies are imported. If you've been ch
 - Fixed a bug in component styles that prevented the box sizing reset from being applied
 - Fixed a regression in `sl-color-picker` where dragging the grid handle wasn't smooth
 - Fixed a bug where slot detection could incorrecly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
+- Fixed a bug in `sl-input` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
 - Improved base path utility logic
 
 ## 2.0.0-beta.46

src/components/checkbox/checkbox.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './checkbox.styles';
@@ -175,8 +176,8 @@ export default class SlCheckbox extends LitElement {
             type="checkbox"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .indeterminate=${this.indeterminate}
-            .checked=${this.checked}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
             role="checkbox"

src/components/color-picker/color-picker.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { styleMap } from 'lit-html/directives/style-map';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
@@ -731,7 +732,7 @@ export default class SlColorPicker extends LitElement {
             autocorrect="off"
             autocapitalize="off"
             spellcheck="false"
-            .value=${this.inputValue}
+            .value=${live(this.inputValue)}
             ?disabled=${this.disabled}
             @keydown=${this.handleInputKeyDown}
             @sl-change=${this.handleInputChange}

src/components/input/input.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
@@ -318,7 +319,7 @@ export default class SlInput extends LitElement {
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
-            .value=${this.value}
+            .value=${live(this.value)}
             autocapitalize=${ifDefined(this.autocapitalize)}
             autocomplete=${ifDefined(this.autocomplete)}
             autocorrect=${ifDefined(this.autocorrect)}

src/components/radio/radio.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './radio.styles';
@@ -176,7 +177,7 @@ export default class SlRadio extends LitElement {
             type="radio"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .checked=${this.checked}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             aria-checked=${this.checked ? 'true' : 'false'}
             aria-disabled=${this.disabled ? 'true' : 'false'}

src/components/range/range.ts

@@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { emit } from '../../internal/event';
+import { live } from 'lit-html/directives/live';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -211,7 +212,7 @@ export default class SlRange extends LitElement {
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
-            .value=${String(this.value)}
+            .value=${live(String(this.value))}
             aria-labelledby=${ifDefined(
               getLabelledBy({
                 label: this.label,

src/components/switch/switch.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';
@@ -157,7 +158,7 @@ export default class SlSwitch extends LitElement {
             type="checkbox"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .checked=${this.checked}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
             role="switch"

src/components/textarea/textarea.ts

@@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { emit } from '../../internal/event';
+import { live } from 'lit-html/directives/live';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -310,7 +311,7 @@ export default class SlTextarea extends LitElement {
             id=${this.inputId}
             class="textarea__control"
             name=${ifDefined(this.name)}
-            .value=${this.value}
+            .value=${live(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}