Pass boolean value to draggable attribute

[bonsall]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

In blazor, when you add the draggable attribute using a boolean value, it produces markup with just the text draggable. For example

<div draggable="@MyBool">Am I really draggable</div>

@code {
    public bool MyBool { get; set }
}

Will produce this output <div draggable>Am I really draggable</div>.

This causes problems in browsers (such as chrome) as they seem to require a value for the draggable attribute, true or false. With the output blazor produces in this situation the browser sometimes allows for dragging and other times does not. It's not clear to me exactly how the browser is behaving but it is spotty and broken at best.

Describe the solution you'd like

for this particular attribute I would like blazor to output the true or false value as the attribute value. For example:

<div draggable="@false">I am not draggable</div>
<div draggable="@true">I am draggable</div>

would produce this markup

<div draggable="false">I am not draggable</div>
<div draggable="true">I am draggable</div>

Additional context

You can work around this behavior by calling .ToString() on your bool, and the current behavior is the documented and expected behavior of blazor. However; if a dev makes the mistake of setting the draggable attribute to a bool value (like my colleague did) it is not clear why the drag/drop functionality is broken and hours can be wasted trying to solve the issue.

[dwarwick]

I would just like to comment that using .ToString on the bool kind of works, but even when the bool is false, so I have false.ToString(), it does not work 100% of the time. I was able to rapidly click on an element and then drag it. The only way I could get it to work consistently is to basically duplicate the div in an if / else statement. If draggable, the div has all of the draggable properties, else it does not have the draggable properties. In the if, set draggable to true.

@if (CanReorder)
{                        
    <div  draggable="true" @ondragstart="@((e) => OnDragStart(e, item))" @ondragover="@((e) => OnDragOver(e, item))" @ondrop="@((e) => OnDrop(e, item))" @ondragover:preventDefault="true" @ondrop:preventDefault="true">
        <div>Drag Me</div>
    </div>
}
else
{
    <div>
        <div>Drag Me</div>
    </div>
}