Skip to content

Border around TextInput on focus - 0.81.4 #15699

@SBS-randerson

Description

@SBS-randerson

Problem Description

When clicking into a TextInput there is now an additional black border added. I think it is coming from Control.UseSystemFocusVisuals. Any idea how to turn it off? The inner black border is from my styles.

I can set focusable={false} but then I can't click in to type text.

Image Image

I tried turning it off globally in the windows/myapp/myapp.cpp but didn't get far.

Steps To Reproduce

Add TextInput
Click into TextInput

Expected Results

No response

CLI version

20.0.0

Environment

System:
  OS: Windows 11 10.0.26100
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Memory: 2.89 GB / 15.73 GB
Binaries:
  Node:
    version: 22.22.0
    path: C:\nvm4w\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.9.4
    path: C:\nvm4w\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 16.11.36631.11 (Visual Studio Professional 2019)
    - 17.14.36930.0 (Visual Studio Enterprise 2022)
Languages:
  Java:
    version: 21.0.9
    path: C:\Program Files\Eclipse Adoptium\jdk-21.0.9.10-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.5
    wanted: 19.1.5
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-windows:
    installed: 0.81.4
    wanted: 0.81.4
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

	"@formatjs/intl-datetimeformat": "^7.2.2",
	"@formatjs/intl-getcanonicallocales": "^3.2.1",
	"@formatjs/intl-locale": "^5.2.1",
	"@formatjs/intl-numberformat": "^9.2.2",
	"@formatjs/intl-pluralrules": "^6.2.2",
	"@react-native-async-storage/async-storage": "^2.2.0",
	"@react-native-documents/picker": "^12.0.1",
	"@react-native/new-app-screen": "0.81.2",
	"@sea-birdscientific/fathom-native-module": "5.0.1",
	"@sea-birdscientific/fathom-utilities": "5.0.1",
	"@sea-birdscientific/react-native-sbs-headless": "5.0.1",
	"@sea-birdscientific/typescript-data-processing": "5.0.1",
	"@sea-birdscientific/typescript-data-visualization": "5.0.0",
	"@testing-library/react-native": "^13.3.3",
	"i18next": "^25.8.11",
	"lodash": "^4.17.23",
	"luxon": "3.4.4",
	"react": "19.1.5",
	"react-i18next": "^16.5.4",
	"react-native": "0.81.5",
	"react-native-elements": "^3.4.3",
	"react-native-macos": "0.81.2",
	"react-native-safe-area-context": "^5.5.2",
	"react-native-windows": "0.81.4",
	"socket.io-client": "^4.8.1"

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

None

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍New issue that needs to be reviewed by the issue management team (label applied by bot)bug

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions