"Disabled" dynamic attribute bug?

[MaxBeaud]

So I'm hesitant to post this as a GitHub issue as I'm not sure if this is a Leptos issue or skill issue. Anyways.
Here is an overlook of the code, I've omitted some of it for brevity:

#[component]
fn App() -> impl IntoView {
    let tile_active = create_rw_signal(false);
    // val.state: RwSignal<bool>
    view! { 
            <For
                children = move |mut val| {
                    view! {
                            <footer>
                                <span
                                role="button"
                                class:secondary = move || val.state.get()
                                disabled = move || tile_active.get() && !val.state.get() // HERE
                                // prop:disabled = move || tile_active.get() && !val.state.get() // has unexpected behaviour
                                on:click = move |_| {
                                    val.toggle_timer();
                                    tile_active.update(|n| *n = !*n);
                                    log::info!("Time: {}", val.secs_on());
                                }>
                                    {move || if val.state.get() {"Stop"} else {"Start"}}
                                </span>
                            </footer>
                     }
                 }
            />
    }

So here, the resulting HTML, when the signal is true, is disable="disabled". Weird but fair enough, the browser can make sense of it. However, when using prop:disabled no HTML or styles are changed in the DOM. Yet, the component behaves as if it was disabled. Of note, while the disabled attribute behaves weirdly the dynamic CSS class above it works as expected.

[gbj]

I'm not quite sure what styling changes you're expecting to see when setting the disabled property on a <span>. I'd recommend using the semantic HTML element for this use case, which is <button>, in which case setting prop:disabled does make a visible change to the button, in addition to disabling the interactivity.

P.S. disabled="disabled" is fairly normal: boolean attributes in HTML are considered true if present with any value, and false if absent. Setting the attribute value to the name is pretty typical for boolean attributes.

[MaxBeaud]

Weirdness of a disabled span aside, when I set the span to disabled manually, it has the styling and functional changes I would expect. Furthermore, the code above works, so then the question is less about not having a working solution, but more so about explaining the weird behavior. I would expect prop:disabled would put the disabled attribute on the span regardless of any styling changes and I would also expect the disabled = to output disabled=bool_signal_value in the HTML. Then again I certain there's maybe some piece of information I'm missing. Thank you for your "explanation" of disabled="disabled" btw!

Edit: So it works using a button element with prop:disabled, is this intended behavior i.e. prop: only work on certain tags? For context I'm using a span for styling reasons. Bonus unexpected behavior, in trying to have only disabled appear on the element I tried putting {move || if tile_active.get() && !val.state.get() {"disabled"} else {""}} in the span props and this does not work at all (but it does in the span body).

[gbj]

prop:disabled sets the disabled property, which is not the same as the disabled attribute (set via disabled=). DOM properties do not appear in HTML, unlike HTML attributes.

[MaxBeaud]

Ok, then how come in the case of prop:open = show_modal: RwSignal<bool> it appears in the HTML? (Following the same behavior I expect from prop:disabled). And then prop:disabled on a button appeared int he HTML but not in the span. If I understand what your telling me it prop:open shouldn't be appearing at all (which is not the case). I'm sorry, I'm not trying to be annoying, but I don't see any how any of this fits together.

[gbj]

By "appears in the HTML" do you mean "appears in HTML rendered by the server" or "appears in the browser's devtools representation of the DOM, which they format like HTML"? These are not the same thing. I meant that prop: does not appear in HTML rendered by the server, because it only exists in the browser. I don't know when/why different browser devtools choose to represent DOM properties as HTML attributes in their DOM inspectors. The relationship between HTML attributes and DOM properties is somewhat complicated for historical reasons. Here's a good overview.

disabled= will always set an attribute named disabled on an HTML element
prop:disabled= will always set a DOM property named disabled on an HTML element

I don't know all of the details of disabled in either case, but in general while these two things usually behave in the same way they are not guaranteed to do the same thing for any given combination of an HTML element and an attribute/property name. Notoriously, for example, the value attribute on an <input> only sets the default value, and the value property sets the current value, hence the use of prop:value= for controlled inputs in Leptos.

[MaxBeaud]

Thank you, I this I understand now. I didn't know the dev-tools were a "representation" and behavior varied because yes when saying HTML I was referring to the dev-tools.