問題タブ [grommet]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - サイプレスはループで複数選択を選択できません
Cypress でテストしている React アプリケーションを作成しています。私の統合テストでは、複数値の選択ボックスで項目を選択するために、文字列の配列を取る cypress コマンドを作成しました。
私が使用しているコードは、おおよそ次のようになります。
cy.wrap
やなどを含め、これをさまざまに繰り返してみました.each
。私が何をしても、配列に複数の項目が含まれている場合、1 つの項目をクリックすると、その項目が正常に選択されたものとしてマークされ、次に他の項目をクリックして選択済みとしてマークされますが、最初の項目は選択状態を失います。コンポーネントの内部状態が最初の変更を実際に受けていないかのようです。
これは私のアプリケーションのバグではないことを確認しました。手動でテストすると、複数選択は正常に機能します。しかし、Cypress は知りたくないだけです。どんな助けでも大歓迎です。
reactjs - グロメットのさまざまなブレークポイントでの edgeSize の問題
グロメットの新人で、問題を抱えています。Grommet v2.14.0 で異なるブレークポイントに異なる edgeSize 値を設定しようとしています。
ここでテーマコードを見つけることができます->
そして、pad="large" を含む基本的な Box コンポーネント
ブレークポイントはうまく機能しています。しかし、パディングはそうではありません。
予想される動作 xsmall ブレークポイントでは、padding-left/right を 4px にする必要があります。 small ブレークポイントでは、padding-left/right を 8px にする必要があります。 medium ブレークポイントでは、padding-left/right を 13px にする必要があります。 largebreakpoint では、padding- left/right は 17px である必要があります xlarge ブレークポイントでは、padding-left/right は 21px である必要があります
実際の動作 小さなブレークポイントの edgeSize だけが正しく機能しています。 ここにスクリーンショットがあります
他のブレークポイント サイズでは、コードはデフォルトの global.edgeSize.large 値 (この場合は 25px) を呼び出しています。 ここにスクリーンショットがあります
また、ShimiSun から SandBox の例を見つけて、コードをテストしましたが、問題はまだ残っています。 https://codesandbox.io/s/grommet-ts-textinput-type-forked-bcrle
おそらく、responsiveBreakpoint prop に関連しています。RespondBreakpoint:"xsmall" に変更すると
次に、xsmall の値が機能し始めます。
つまり、すべてのブレークポイントをレスポンシブとして定義したいと考えています。
私が間違っていることを知っていますか、それとも一般的な行動ですか?
前もって感謝します。
reactjs - グロメットのアコーディオンの下に境界線を表示しない
grommet
Web アプリにライブラリを使用しています。FormFields やアコーディオンなどの他のコントロールの下に境界線が表示されないようにする方法を知りたいです。
問題を示し、推奨事項をテストできるサンドボックスを作成しました。
https://codesandbox.io/s/grommet-accordion-issue-v7u5y?file=/index.js
Accordion テーマの値を設定して境界線を非表示にしましたが、FormField にそのような設定が表示されません。
reactjs - グロメット MaskedInput は複数の入力では機能しません
MaskedInput
Web アプリのタイム ピッカーを作成するために使用しています。ウェブサイトにある例を使用しましたが、grommet
正しく動作しません。たとえば、ウェブサイトに表示されるウィジェットで
https://v2.grommet.io/maskedinput
時間をタップして時間を変更できますが、分をタップして分を変更することはできません。分を表示するには、まず外側をタップして焦点を緩め、次に分をタップして分を表示できるようにする必要があります。同じことが、午前/午後の選択にも当てはまります。フォーカスを外さない限り見えないので、午前/午後の設定をタップして変更します。
フィールドがすでにフォーカスされている場合でも、ユーザーがマスクされた入力内の入力のいずれかをクリックしたときに入力値を表示できるように構成するにはどうすればよいですか?
grommet
このサンドボックスは、ウェブサイトhttps://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/maskedinput&module=%2Fsrc%2FMaskedInput.jsに存在する同じ問題も表示します
この問題は、MaskedInput に値が設定されたときに発生します。これは、タイム ピッカーの場合に非常によくあるケースです。問題を示す添付のビデオを参照してください。分をタップすると、分のドロップダウンが表示されますが、その後、時間または午前/午後をタップすると、他のドロップダウンは表示されません。