Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TextInput component parity for Fabric #11145

Closed
191 of 233 tasks
Tracked by #11135
jonthysell opened this issue Jan 27, 2023 · 1 comment
Closed
191 of 233 tasks
Tracked by #11135

TextInput component parity for Fabric #11145

jonthysell opened this issue Jan 27, 2023 · 1 comment
Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: TextInput Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Milestone
Backlog

Comments

@jonthysell
Copy link
Contributor

jonthysell commented Jan 27, 2023 •
edited by TatianaKapos
Loading

This task captures the work to reach parity between Paper and Fabric for the native code for the <TextInput> component.

ComponentView

  1. Create the WindowsTextInputComponentView (WTICV)
  2. Register the ComponentView in the ComponentViewRegistry

APIs

See latest spec at https://reactnative.dev/docs/textinput.

TextInput Props

41/61

API Platform RNW Paper RNW Fabric Notes
  • allowFontScaling
 TIVM Pri 1 Fabric: Code present but commented out?
  • autoCapitalize
 TIVM Pri 1 Fabric: Code present but commented out?
  • autoComplete
 Android No No?
  • autoCorrect
 No No?
  • autoFocus
 TIVM Pri 1
  • blurOnSubmit
 No No?
  • caretHidden
 TIVM WTICV Fabric: #12430
  • clearButtonMode
 iOS No No?
  • clearTextOnFocus
 iOS TIVM Pri 1
  • contextMenuHidden
 TIVM Pri 1
  • dataDetectorTypes
 iOS No No?
  • defaultValue
 TIVM WTICV Passed in as text = value ?? defaultValue
  • cursorColor
 Android TIVM WTICV Paper: #11502, Fabric: #12158
  • disableFullscreenUI
 Android No No?
TIVM WTICV Fabric: #11488
  • enablesReturnKeyAutomatically
 iOS No No?
  • importantForAutofill
 Android No No?
  • inlineImageLeft
 Android No No?
  • inlineImagePadding
 Android No No?
  • inputAccessoryViewID
 iOS No No?
  • keyboardAppearance
 iOS No No?
  • keyboardType
 TIVM Pri 1
  • maxFontSizeMultiplier
 No No?
  • maxLength
 TIVM WTICV
TIVM WTICV Fabric: #11490
  • numberOfLines
 Android No No?
  • onBlur
 TIVM+VMB Pri 1 Event is topTextInputBlur
  • onChange
 TIVM+VMB WTICV Event is topTextInputChange
TIVM Pri 1 Event is topTextInputChangeText
  • onContentSizeChange
 TIVM Pri 1 Event is topTextInputContentSizeChange
  • onEndEditing
 TIVM+VMB Pri 1 Event is topTextInputEndEditing
  • onPressIn
 TIVM Pri 1 Event is topTextInputPressIn
  • onPressOut
 TIVM Pri 1 Event is topTextInputPressOut
  • onFocus
 TIVM+VMB Pri 1 Event is topTextInputFocus
  • onKeyPress
 TIVM WTICV topTextInputKeyPress, Fabric: #12771
  • onLayout
 VMB Pri 1
  • onScroll
 TIVM Pri 1 Event is topTextInputScroll
  • onSelectionChange
 TIVM WTICV Event is topTextInputSelectionChange
TIVM+VMB WTICV Event is topTextInputSubmitEditing, Fabric: #12746
TIVM WTICV Fabric: #12018
  • placeholderTextColor
 TIVM WTICV Fabric: #12018
  • returnKeyLabel
 Android No No?
  • returnKeyType
 No No?
  • rejectResponderTermination
 iOS No No?
  • scrollEnabled
 iOS TIVM Pri 1
TIVM WTICV Fabric: #11484
  • selection
 TIVM Pri 1 Fabric: Code present but commented out?
  • selectionColor
 TIVM Pri 1
  • selectTextOnFocus
 TIVM Pri 1
  • showSoftInputOnFocus
 No No?
  • spellCheck
 iOS TIVM Pri 1
  • textAlign
 TIVM Pri 1
  • textContentType
 iOS No No?
  • passwordRules
 IOS No No?
  • style
 See Below See Below Supports Text Style Props*, View Style Props, Layout Props, Shadow Props
  • textBreakStrategy
 Android No No?
  • underlineColorAndroid
 Android No No?
  • value
 TIVM WTICV Passed in as text = value ?? defaultValue
  • clearTextOnSubmit
 Windows TIVM WTICV Fabric: #12746
  • mostRecentEventCount
 Windows TIVM Pri 1
Windows TIVM WTICV Fabric: #12746

TextInput Methods

4/4

API Platform RNW Paper RNW Fabric Notes
  • focus()
 TIVM+VMB CBCV Duplicate of Native Component Method? Fabric: #11323
  • blur()
 TIVM+VMB CBCV Duplicate of Native Component Method? Fabric: #11323
  • clear()
 TIVM WTICV Invoked by calling setTextAndSelection
  • isFocused()
 JS JS

View Props

48/58

API Platform RNW Paper RNW Fabric Notes
  • accessibilityActions
 FEVM Pri 2
  • accessibilityElementsHidden
 iOS No No?
  • accessibilityHint
 FEVM CBCV+CDAP Fabric: #12036
  • accessibilityIgnoresInvertColors
 iOS No No?
  • accessibilityLabel
 FEVM CBCV+CDAP Fabric: #11674
  • accessibilityLanguage
 iOS No No?
  • accessibilityLiveRegion
 Android FEVM Pri 2
  • accessibilityRole
 FEVM CDAP Fabric: #11412
  • accessibilityState
 FEVM CBCV+CDAP Fabric: Partial impl in #11674
  • accessibilityValue
 FEVM CBCV+CDAP+WTICV Fabric: #12287
  • accessibilityViewIsModal
 iOS No No?
  • accessible
 CVM+FEVM CBCV+CDAP Fabric: #11719
  • collapsable
 Android No No?
  • focusable
 Android TIVM+CVM CBCV+CDAP Fabric: #11674
  • hitSlop
 JS JS
  • importantForAccessibility
 Android No No?
  • nativeID
 No No?
  • needsOffscreenAlphaCompositing
 No No?
  • nextFocusDown
 Android No No?
  • nextFocusForward
 Android No No?
  • nextFocusLeft
 Android No No?
  • nextFocusRight
 Android No No?
  • nextFocusUp
 Android No No?
  • onAccessibilityAction
 VMB Pri 2
  • onAccessibilityEscape
 iOS No No?
  • onAccessibilityTap
 No CDAP Fabric: #11874
  • onLayout
 VMB Pri 1
  • onMagicTap
 iOS No No?
  • onMoveShouldSetResponder
 JS JS
  • onMoveShouldSetResponderCapture
 JS JS
  • onResponderGrant
 JS JS
  • onResponderMove
 JS JS
  • onResponderReject
 JS JS
  • onResponderRelease
 JS JS
  • onResponderTerminate
 JS JS
  • onResponderTerminationRequest
 JS JS
  • onStartShouldSetResponder
 JS JS
  • onStartShouldSetResponderCapture
 JS JS
  • pointerEvents
 VMB WTICV
  • removeClippedSubviews
 No No?
  • renderToHardwareTextureAndroid
 Android No No?
  • shouldRasterizeIOS
 iOS No No?
  • testID
 FEVM CDAP Fabric: #11412
  • accessibilityPosInSet
 Windows FEVM Pri 2
  • accessibilitySetSize
 Windows FEVM Pri 2
  • enableFocusRing
 Windows JS CBCV+WTICV Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • keyDownEvents
 Windows TIVM+VMB WTICV+CBCV Fabric: #12146
  • keyUpEvents
 Windows VMB WTICV+CBCV Fabric: #12146
  • onBlur
 Windows TIVM+VMB Pri 1 Duplicate of TextInput prop, but with different event?
  • onFocus
 Windows TIVM+VMB Pri 1 Duplicate of TextInput prop, but with different event?
  • onKeyDown
 Windows VMB WTICV+CBCV+CEH Fabric: #12146
  • onKeyDownCapture
 Windows VMB Pri 1
  • onKeyUp
 Windows VMB WTICV+CBCV+CEH Fabric: #12146
  • onKeyUpCapture
 Windows VMB Pri 1
  • onMouseEnter
 Windows VMB CEH
  • onMouseLeave
 Windows VMB CEH
  • tabIndex
 Windows CVM Pri 1
  • tooltip
 Windows FEVM Pri 1

Text Style Props

11/20

API Platform RNW Paper RNW Fabric Notes
  • color
 CVM WTICV
  • fontFamily
 TIVM Pri 1 Fabric: Code present but commented out?
  • fontSize
 TIVM WTICV
  • fontStyle
 TIVM Pri 1 Fabric: Code present but commented out?
  • fontWeight
 TIVM WTICV
  • includeFontPadding
 Android No No?
  • fontVariant
 No No?
  • letterSpacing
 TIVM Pri 1
  • lineHeight
 No Pri 1
  • textAlign
 TIVM Pri 1
  • textAlignVertical
 Android No No?
  • textDecorationColor
 iOS No No?
  • textDecorationLine
 No Pri 1
  • textDecorationStyle
 iOS No No?
  • textShadowColor
 No No?
  • textShadowOffset
 No No?
  • textShadowRadius
 No No?
  • textTransform
 No Pri 1
  • writingDirection
 FEVM Pri 1
  • characterSpacing
 Windows TIVM Pri 1 Alias for letterSpacing?

View Style Props

28/29

API Platform RNW Paper RNW Fabric Notes
  • backfaceVisibility
 No CBCV+WTICV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps
  • backgroundColor
 CVM WTICV
  • borderBottomColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomEndRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomLeftRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomRightRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomStartRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderColor
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
No CBCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopColor
 No CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopEndRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopLeftRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopRightRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopStartRadius
 CVM CBCV+WTICV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • elevation
 Android No No?
  • opacity
 FEVM Pri 1
  • transform
 FEVM CBCV+WTICVCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps

Layout Props

51/53

API Platform RNW Paper RNW Fabric Notes
  • alignContent
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • alignItems
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • alignSelf
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • aspectRatio
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • borderBottomWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderWidth
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • bottom
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • direction
 FEVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • display
 FEVM+NUIM WTICV
  • end
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flex
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flexBasis
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flexDirection
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flexGrow
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flexShrink
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • flexWrap
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • height
 VMB+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • justifyContent
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • left
 VMB+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • margin
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginBottom
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginEnd
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginHorizontal
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginLeft
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginRight
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginStart
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginTop
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • marginVertical
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • maxHeight
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • maxWidth
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • minHeight
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • minWidth
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • overflow
 NUIM Pri 1
  • padding
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingBottom
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingEnd
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingHorizontal
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingLeft
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingRight
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingStart
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingTop
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • paddingVertical
 CVM+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • position
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • right
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • start
 NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • top
 VMB+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • width
 VMB+NUIM CBCV+WTICV Fabric: RN Core resolves LayoutMetrics
  • zIndex
 FEVM Pri 1

Shadow Props

4/4

API Platform RNW Paper RNW Fabric Notes
  • shadowColor
 No CBCV+WTICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOffset
 iOS No CBCV+WTICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOpacity
 iOS No CBCV+WTICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowRadius
 iOS No CBCV+WTICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps

Native Component Methods

2/2

API Platform RNW Paper RNW Fabric Notes
  • blur()
 Windows TIVM+VMB CBCV Fabric: #11323
  • focus()
 Windows TIVM+VMB CBCV Fabric: #11323

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.
@ghost ghost added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Jan 27, 2023
@jonthysell jonthysell added the Area: Fabric Support Facebook Fabric label Jan 27, 2023
@jonthysell jonthysell added this to the 0.72 milestone Jan 27, 2023
@jonthysell jonthysell mentioned this issue Jan 27, 2023
Closed
9 tasks
@chrisglein chrisglein added Area: TextInput Deliverable Major item tracked for top-level planning in ADO and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Jan 30, 2023
@ghost ghost added the Invalid Triage https://github.com/microsoft/react-native-windows/wiki/Triage-Process (label applied by bot) label Jan 30, 2023
@chrisglein chrisglein added enhancement and removed Invalid Triage https://github.com/microsoft/react-native-windows/wiki/Triage-Process (label applied by bot) labels Jan 31, 2023
@chrisglein chrisglein modified the milestones: 0.72, Backlog Apr 4, 2023
This was referenced Apr 7, 2023
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@chrisglein chrisglein mentioned this issue Aug 17, 2023
Open
@chrisglein chrisglein mentioned this issue Aug 30, 2023
Closed
This was referenced Aug 31, 2023
Closed
Closed
Closed
Closed
Closed
@chrisglein chrisglein mentioned this issue Sep 7, 2023
Closed
@jonthysell jonthysell added New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Area: Component Views API: Completion labels Mar 7, 2024
@jonthysell
Copy link
Contributor Author

Closing this deliverable, all remaining component properties required for parity are now being tracked by individual issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: TextInput Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Projects
RNW New Architecture
Status: Done
Milestone
Backlog
Development

No branches or pull requests
3 participants
@jonthysell @chrisglein @YajurG