TextInput without a label is invisible while it is empty and unfocused

オープン 初心者向け
  • 何か問題がありますか？
#5,187 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
82/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react-native, typescript
領域
frontend

調査の方向性

src/components/TextInput/hooks.ts と TextInput.tsx:401 から始めます。ここでは animatedContainerStyle がネイティブ入力ラッパーに適用されています。ラベルの有無によって不透明度がどう変わるかを確認し、ラベルのない、空でフォーカスされていない TextInput のテストを追加または調整します。ラベルなしの入力でプレースホルダーが表示され、ラベル付きの入力ではフローティングラベルの動作が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug
Current behaviour

A TextInput with no label is invisible while it is empty and unfocused: its input, its placeholder and any prefix or suffix have opacity 0, so only the outline shows until the field is focused. The wrapper around the native input takes the label float opacity (animatedContainerStyle in src/components/TextInput/hooks.ts, applied at TextInput.tsx:401) whether or not there is a label, and that value is 0 while the field is empty and unfocused. In 5.x the placeholder was visible.

Expected behaviour

A TextInput without a label shows its input and placeholder at full opacity at all times. Only a TextInput with a label hides the input while the label rests in its place.

How to reproduce?
const [query, setQuery] = React.useState('');

<TextInput
  variant="outlined"
  placeholder="Search for plugins..."
  value={query}
  onChangeText={setQuery}
/>
  1. Render it: only the outline shows, with no placeholder.
  2. In a test, expect(screen.getByPlaceholderText('Search for plugins...')).toBeVisible() fails with "Received element is not visible".
What have you tried so far?

Applying animatedContainerStyle only when label is set keeps the floating label behaviour and shows the placeholder.

Your Environment
software version
react-native 0.88.1
react-native-paper 6.0.0-alpha.1 and main at c8d8bab
主要言語
TypeScript
スター
14.5k
フォーク
2.3k
平均マージ
2日 12時間
マージ済み PR（30日）
22

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

callstack/react-native-paper のほかの issue

callstack/react-native-paper の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。