Hello all! :pikachu-hi: I have an issue on the Sa...

# kobweb

[Christiano]

Hello all! pikachu hi

I have an issue on the Safari browser with a TextArea... for some reason the style add through CssStyle is not being set (the same for a TextInput)

In the image you can see that the Safari (left) is not using the proper styling while on the right Brave/Chrome is using it correctly. Also the @scope is properly shown... I'm at this for a couple of hours and can't seem to find what the issue is and why this only happens on an Input (with style text) or a TextArea... Can someone point me in the right direction or tell me what is actually happening?

A code snippet which causes it is the following...

val TextAreaStyle = CssStyle<TextAreaKind> {
    base {
        Modifier
            .appearance(Appearance.None) // Disable browser styles - critical for Safari
            .backgroundColor(Colors.Transparent)
            .outline(0.px, LineStyle.Solid, Colors.Transparent) // Disable default outline
            .border(0.px, LineStyle.Solid, Colors.Transparent) // Reset default border
    }
}

sealed interface TextAreaKind : ComponentKind

@Composable
fun DsEditableArea(
    modifier: Modifier = Modifier,
    id: String,
    label: String,
    placeholder: String,
    value: String,
    required: Boolean = InputDefaults.Required,
    onValueChange: (String) -> Unit
) {

    Column(
        modifier = modifier
    ) {
        Label(
            attrs = Modifier
                .margin(bottom = 0.5.cssRem)
                .toAttrs(),
            forId = id
        ) {
            Text(value = label)
        }

        TextArea(
            value = value,
            attrs = TextAreaStyle
                .toModifier()
                .toAttrs {
                    attr(Attributes.Name, "Message")
                    if (required) required()
                    placeholder(placeholder)
                    onInput { onValueChange(it.value) }
                }
        )
    }
}

Edit: on the Checkbox it correctly sets the style and also shows up in the inspect tool

[Christiano]

I also see this issue on other people there websites made in kobweb, for example the website of Meet just above my message has it as well so I feel like this is an internal kobweb issue? 🤔

https://codingmeet.com/contact_me

[S.]

try .styleModifier { property("appearance", "none") } instead of kobweb's overload

[S.]

and the blue outline might be BorderFocusColor which only shows when the textfield has focus

[Christiano]

Hmm, this seemingly does something, everything added to the styleModifier like this does get set... but doesn't it defeat the purpose of the CssStyle a little bit? 🤔

[S.]

no, that's about Modifiers not CssStyle. look at the source of Modifier.appearance() and check what it does

[S.]

but I don't see the component styles layer in the safari version at all

[Christiano]

I do see the component style layer for some other components, only the input (style = text) and textarea is giving me issues. And the styleModifier you mention is giving some solace, but only if I duplicate everything from the CssStyle into the styleModifier as well... which kinda feels wrong 😅

[S.]

I meant to just replace Modifier.appearance(Appearance.None) with the styleModifier above

[Christiano]

I think you meant like this?

val TextAreaStyle = CssStyle<TextAreaKind> {
    base {
        Modifier
            .styleModifier { property("appearance", "none") }
            .backgroundColor(Colors.Transparent)
            .outline(0.px, LineStyle.Solid, Colors.Transparent) // Disable default outline
            .border(0.px, LineStyle.Solid, Colors.Transparent) // Reset default border
    }
}

Sadly this does nothing at all as well, since this style is not even being set on the input element 🙂

[S.]

yeah because that's the only difference I have in my code

[Christiano]

Huh really? That's strange, maybe the issue is somewhere deeper then? 🤔

[David Herman]

Looking into this. Not sure yet what is going on. Actually, I'm trying to inspect my page with safari and the tools are freezing.

[David Herman]

Modifier.appearance(Appearance.None) and .styleModifier { property("appearance", "none") } are identical, except the Kobweb version has type safety.

Modifier:
https://github.com/varabyte/kobweb/blob/174e2597e6c6f12ffa8c3fc44cf5f2b8d42c0d96/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/modifiers/ElementModifiers.kt#L9

Style property that modifier delegates to:
https://github.com/varabyte/kobweb/blob/174e2597e6c6f12ffa8c3fc44cf5f2b8d42c0d96/frontend/compose-html-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/css/Element.kt#L20

Test verifying style property:
https://github.com/varabyte/kobweb/blob/174e2597e6c6f12ffa8c3fc44cf5f2b8d42c0d96/frontend/compose-html-ext/src/jsTest/kotlin/com/varabyte/kobweb/compose/css/CssStylePropertyTests.kt#L226

[David Herman]

I am able to repro safari textareas ignoring the styles I'm trying to apply to them

[S.]

Works for all my sites though

[David Herman]

@S. I am 99% sure if you change all calls of .styleModifier { property("appearance", "none") } to appearance(Appearance.None) it will be identical behavior. If that's not the case, I'd love to hear it.

[S.]

me too. seeing that it's in my working code I only suggested to check that

[S.]

but the entire component styles layer seems to be missing for text input

[David Herman]

I'm digging. I wouldn't be surprised if Safari is choking on a feature we thought was supported.

It's very annoying and maybe concerning that the safari dev tools are choking right now on this stuff. For example, I can't even check console logs. So digging into this is requiring a bit of creativity and is slow going.

[David Herman]

Silk is stalled which is very unfortunate. But I do want to have a TextArea component at some point!

[David Herman]

I think the time will come soon to really push forward on adding more Silk widgets so people don't have to do this stuff for themselves.

[Letter]

I found this but it should have been fixed in Safari 26.4.

[S.]

that's most likely it. I just checked the coding meet site, which supposedly doesn't work, but it's also displaying fine for me. Version 26.4 (21624.1.16.11.4)

[David Herman]

Oh! I am still on Safari 26.3.1 (21623.2.7.111.2), I wonder why

[S.]

check for OS updates, I think it's bundled

[David Herman]

I usually update pretty aggressively. But yes I just checked for updates on my Mac and it seems like it's time to do a quick update

[David Herman]

It's lunch here so perfect time for my computer to take itself out of commission for 30 minutes

[David Herman]

OK confirmed! @Christiano you got bit, like I did, by a stale Safari bug. Please update your browser to latest (26.4 or newer; I'm now on 26.5)

Thank you for surfacing that info @Letter

[Christiano]

Ooh wow... did not expect it to require an update... but here we are, fixed the issue 😅

Thanks both for helping me tackle this 😊