fixes #839

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `--indicator-width` custom property to `<sl-progress-ring>` [#837](https://github.com/shoelace-style/shoelace/issues/837)
 - Added Swedish translation [#838](https://github.com/shoelace-style/shoelace/pull/838)
+- Added support for `step="any"` for `<sl-input type="number">` [#839](https://github.com/shoelace-style/shoelace/issues/839)
 - Changed the type of component styles from `CSSResult` to `CSSResultGroup` [#828](https://github.com/shoelace-style/shoelace/issues/828)
 - Fixed a bug in `<sl-color-picker>` where using <kbd>Left<kbd> and <kbd>Right</kbd> would select the wrong color
 - Fixed a bug in `<sl-tab-group>` where the divider was on the wrong side when using `placement="end"`

src/components/input/input.test.ts

@@ -188,4 +188,25 @@ describe('<sl-input>', () => {
       expect(form.reportValidity()).to.be.false;
     });
   });
+
+  describe('when type="number"', () => {
+    it('should be valid when the value is within the boundary of a step', async () => {
+      const el = await fixture<SlInput>(html` <sl-input type="number" step=".5" value="1.5"></sl-input> `);
+      expect(el.invalid).to.be.false;
+    });
+
+    it('should be invalid when the value is not within the boundary of a step', async () => {
+      const el = await fixture<SlInput>(html` <sl-input type="number" step=".5" value="1.25"></sl-input> `);
+      expect(el.invalid).to.be.true;
+    });
+
+    it('should update validity when step changes', async () => {
+      const el = await fixture<SlInput>(html` <sl-input type="number" step=".5" value="1.5"></sl-input> `);
+      expect(el.invalid).to.be.false;
+
+      el.step = 1;
+      await el.updateComplete;
+      expect(el.invalid).to.be.true;
+    });
+  });
 });

src/components/input/input.ts

@@ -125,8 +125,11 @@ export default class SlInput extends LitElement {
   /** The input's maximum value. */
   @property() max: number | string;
 
-  /** The input's step attribute. */
-  @property({ type: Number }) step: number;
+  /**
+   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+   * implied, allowing any numeric value.
+   */
+  @property() step: number | 'any';
 
   /** A pattern to validate input against. */
   @property() pattern: string;
@@ -272,6 +275,14 @@ export default class SlInput extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  @watch('step', { waitUntilFirstUpdate: true })
+  handleStepChange() {
+    // If step changes, the value may become invalid so we need to recheck after the update. We set the new step
+    // imperatively so we don't have to wait for the next render to report the updated validity.
+    this.input.step = String(this.step);
+    this.invalid = !this.input.checkValidity();
+  }
+
   handleFocus() {
     this.hasFocus = true;
     emit(this, 'sl-focus');
@@ -384,7 +395,7 @@ export default class SlInput extends LitElement {
               maxlength=${ifDefined(this.maxlength)}
               min=${ifDefined(this.min)}
               max=${ifDefined(this.max)}
-              step=${ifDefined(this.step)}
+              step=${ifDefined(this.step as number)}
               .value=${live(this.value)}
               autocapitalize=${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}
               autocomplete=${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}