jwstegemann / fritz2

Easily build reactive web-apps in Kotlin based on flows and coroutines.
https://www.fritz2.dev
MIT License
636 stars 25 forks source link

Headless inputField of type number has a black border on focus #805

Closed JonathanMandel closed 9 months ago

JonathanMandel commented 9 months ago

Describe the bug The headless inputField has a black border that appears when you focus on the input. I have not found a way to remove this border with Tailwind CSS.

To Reproduce Steps to reproduce the behavior: Create a div with an inputField inside it. Make the type("number"). For example:

`div() { inputField("grid grid-cols-4 w-[250px] h-[2em] p-3 items-center gap-2") { value(percentStore) inputLabel("col-span-3 bg-white") { nameStore.data.renderText() } inputTextfield("max-w-[80px] hover:bg-lime-100 col-span-1 border-0 border-opacity-0") { placeholder("0") type("number") min("0") max("100") step("1") changes.values() handledBy percentStore.update } } } }'


**Expected behavior**
The inputField should render without any default markup. 

**Screenshots**
If
![localhost-8080-Add-preferment](https://github.com/jwstegemann/fritz2/assets/3219814/1855904a-0317-4bb6-8d18-51f5d125f1fd)
 applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: Windows
 - Browser Chrome
 - Version 117.0.5938.150 (Official Build) (64-bit)

**Smartphone (please complete the following information):**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser [e.g. stock browser, safari]
 - Version [e.g. 22]

**Additional context**
Add any other context about the problem here.
JonathanMandel commented 9 months ago

I'm finding this black border on focus on every kind of input field in my app. I'm going to close this until I get to the bottom of this.

Lysander commented 9 months ago

I propose to include the https://github.com/tailwindlabs/tailwindcss-forms Plugin - this will reset base styles for form elements.