Repository navigation
Conversation
The input container took the label float opacity whether or not a label was set, so an empty, unfocused TextInput without a label hid its input and placeholder. Apply that opacity only when there is a label to rest in the input's place.
|
Found potential problems with the pull request:
|
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
A
TextInputwithout alabelis invisible while it is empty and unfocused: only the outline shows, and the input and its placeholder appear only after the field gets focus. The wrapper around the native input always took the label float opacity (animatedContainerStyle), which is 0 while the field is empty and unfocused, even when there is no label to rest in the input's place.useTextInputnow passes that animated opacity only when alabelis set. A labelled field keeps its behaviour: the input stays hidden while the label rests in its place and fades in as the label floats. A field without a label shows its input and placeholder at all times, as in 5.x.Related issue
Fixes #5187
Related: #5111 drops this wrapper opacity as part of its wider TextInput MD3 rework. This is the minimal fix for
mainon its own.Screenshots / Videos
No visual change for labelled fields. Unlabelled fields show their placeholder before focus instead of rendering as an empty outline.
Test plan
New tests in
src/components/__tests__/TextInput.test.tsx:keeps an empty, unfocused filled|outlined TextInput without a label visible:getByPlaceholderText(...)istoBeVisible(). Both fail onmainwith "Received instance is not visible" and pass with this change.hides the input of an empty, unfocused TextInput while its label rests in place: guards the labelled behaviour. Passes before and after.Checks run locally:
yarn test: 54 suites, 785 passed, 1 skippedyarn lint,yarn typecheckandtsc -p tsconfig.build.json --noEmit --customConditions react-native-paper-source,react-native-legacy-deep-imports: cleanManual: render
<TextInput variant="outlined" placeholder="Search for plugins..." value="" onChangeText={...} />in the example app. The placeholder shows without focusing the field.