'TextField' focus does not change border color (TW starter kit)

[CHE1RON]

Provide a general summary of the issue here

When focusing the TextField component in your Tailwind CSS starter kit, the border-gray-600 class is not applied (strangely for SearchField it works as expected) - this seems to affect the starter kit for download as well as the repository, but not the online demo 🤔

bug_report_textfield.mov

🤔 Expected Behavior?

Dark color (border-gray-600) being applied to the border when TextField receives focus

😯 Current Behavior

Light color (border-gray-300) remains unchanged when TextField receives focus

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Just try out the starter kit from the website or inside the repository, go to TextField component, click inside - nothing changes

Version

3.33.0 / 1.2.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[hezlinemoses]

const inputStyles = tv({ extend: focusRing, base: 'border-2 rounded-md', variants: { isFocused: fieldBorderStyles.variants.isFocusWithin, isDisabled: fieldBorderStyles.variants.isDisabled, isInvalid: fieldBorderStyles.variants.isInvalid // ...fieldBorderStyles.variants, } }); This seems to fix it for me, something is wrong with spreading tho idk what

[snowystinger]

Looked into this while working on #8493 but I was unable to reproduce locally in our repo and I was unable to reproduce with the latest build on the docs website available for download. If there's still an issue, we'll need new reproduction steps and we can reopen.