見出し画像

Lightning Web Componentsのinput type="number"でスピンボタンを表示する方法

Winter'19までは、type="number"の場合、スピンボタンが表示されていました。

画像1

Spring'20からはスピンボタンは表示されなくなります。

画像2

調べて見ると、lightning-inputが生成するinputのtypeがtextに変更されたようです。Winter'19までは通常はtext、フォーカスが当たるとnumberになっています。

スピンボタンはかなり便利な機能です。Spring'20以降もスピンボタンを使う場合は、inputを使えば対応可能です。見た目については、class="slds-inputとすれば対応できます。

<input type="number" class="slds-input" max="9999" min="0" value={quantity} step={stepnumber} onchange={handleChangeQuantity}></input>


この記事が気に入ったらサポートをしてみませんか?