react-native-windows icon indicating copy to clipboard operation
react-native-windows copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

TextInput component parity for Fabric

Open jonthysell opened this issue 1 year ago • 0 comments

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

ComponentView

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

APIs

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

TextInput Props

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?
  • [x] autoComplete
 Android No No?
  • [x] autoCorrect
 No No?
  • [ ] autoFocus
 TIVM Pri 1
  • [x] blurOnSubmit
 No No?
  • [x] caretHidden
 TIVM WTICV Fabric: #12430
  • [x] clearButtonMode
 iOS No No?
  • [ ] clearTextOnFocus
 iOS TIVM Pri 1
  • [ ] contextMenuHidden
 TIVM Pri 1
  • [x] dataDetectorTypes
 iOS No No?
  • [x] defaultValue
 TIVM WTICV Passed in as text = value ?? defaultValue
  • [x] cursorColor
 Android TIVM WTICV Paper: #11502, Fabric: #12158
  • [x] disableFullscreenUI
 Android No No?
TIVM WTICV Fabric: #11488
  • [x] enablesReturnKeyAutomatically
 iOS No No?
  • [x] importantForAutofill
 Android No No?
  • [x] inlineImageLeft
 Android No No?
  • [x] inlineImagePadding
 Android No No?
  • [x] inputAccessoryViewID
 iOS No No?
  • [x] keyboardAppearance
 iOS No No?
  • [ ] keyboardType
 TIVM Pri 1
  • [x] maxFontSizeMultiplier
 No No?
  • [x] maxLength
 TIVM WTICV
TIVM WTICV Fabric: #11490
  • [x] numberOfLines
 Android No No?
  • [ ] onBlur
 TIVM+VMB Pri 1 Event is topTextInputBlur
  • [x] 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 topTextTInputPressIn
  • [ ] onPressOut
 TIVM Pri 1 Event is topTextTInputPressOut
  • [ ] onFocus
 TIVM+VMB Pri 1 Event is topTextInputFocus
  • [ ] onKeyPress
 TIVM Pri 1 Event is topTextInputKeyPress
  • [ ] onLayout
 VMB Pri 1
  • [ ] onScroll
 TIVM Pri 1 Event is topTextInputScroll
  • [x] onSelectionChange
 TIVM WTICV Event is topTextInputSelectionChange
TIVM+VMB Pri 1 Event is topTextInputSubmitEditing
TIVM WTICV Fabric: #12018
  • [x] placeholderTextColor
 TIVM WTICV Fabric: #12018
  • [x] returnKeyLabel
 Android No No?
  • [x] returnKeyType
 No No?
  • [x] 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
  • [x] showSoftInputOnFocus
 No No?
  • [ ] spellCheck
 iOS TIVM Pri 1
  • [ ] textAlign
 TIVM Pri 1
  • [x] textContentType
 iOS No No?
  • [x] passwordRules
 IOS No No?
  • [x] style
 See Below See Below Supports Text Style Props*, View Style Props, Layout Props, Shadow Props
  • [x] textBreakStrategy
 Android No No?
  • [x] underlineColorAndroid
 Android No No?
  • [x] value
 TIVM WTICV Passed in as text = value ?? defaultValue
  • [ ] clearTextOnSubmit
 Windows TIVM Pri 1
  • [ ] mostRecentEventCount
 Windows TIVM Pri 1
Windows TIVM Pri 1

TextInput Methods

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

View Props

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

Text Style Props

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

View Style Props

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

Layout Props

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

Shadow Props

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

Native Component Methods

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

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.

jonthysell avatar Jan 27 '23 22:01 jonthysell