Spring’20でLightning Web Componentsにおいて気を付けるべきこと

もうすぐ、Salesforceの本番環境にSpring’20がリリースされます。

Lightning Web Componentsにおいて、重要な変更が行われています。

lightning-inputのtype=”number”でスピンボタンが表示されない

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

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

調べて見ると、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>

Apexクラスを呼び出して返ってきたオブジェクトにはプロパティを追加できない

Lightning Web ComponentsからApexクラスを呼び出すと復帰値をオブジェクトとして取得できます。

const result = await callapexclass();

Winter’20までは、このresultにプロパティを追加することができました。

result.addprop = 'value';

Spring’20からはこれができなくなります。オブジェクトがfreezeされていることが原因です(これはこれで正しいような気はします)

すでに、取得したオブジェクトにプロパティを追加している場合は対応が必要です。以下のようにすることでこれまで通りプロパティを追加することができます。

let result = await callapexclass();
result = JSON.parse(JSON.stringify(parse)); // ココ!