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

Labels

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions