Review `Dropdown` component in other Blazor based libraries

[TheHadiAhmadi]

To develop Dropdown component, there is many ways.

1. Write component's logic in Blazor component
2. Write JavaScript code and integrate with Blazor component
3. Write Logic in javascript and access to dropdown features using data-* attributes.

MatBlazor

MatBlazor uses @material/menu npm package and it's blazor component is just a wrapper which calls methods of it's related javascript code.

Here you can see JSInvokeAsync calls which is related to javascript. and Here is it's related Javascript file.

Blazorise

Blazorise is using @floating-ui/dom npm package, Here is the initialization code. and Here in razor.cs file, initializes it's JS code.

MudBlazor

MudBlazor uses Custom Javascript code instead of any npm package for Dropdown (Popover). I think it would be possible to write this code in C# without using JSRuntime...

Blazorstrap

Blazorstrap uses @popperjs/core package. https://github.com/chanan/BlazorStrap/blob/610cef351fb7de5a78aec71064a521588e7a7ff1/src/BlazorStrap/wwwroot/blazorstrapinterop.js#L325

BitPlatform

BitPlatform's dropdown logic is inside it's razor.cs file. also it is using JSRuntime which I don't know it's usage.

https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs

[TheHadiAhmadi]

@babakhani @abdolian @pournasserian @ParsaGachkar What do you think? Which approach is better? Do we need features of Popperjs/Floating-ui or other Javascript based popper implementation? DaisyUI doesn't have this feature.

[ParsaGachkar]

i think these features can be achieved without JavaScript. We could use C# logic to add a display/hide class to our drop down. and i believe simple dropdowns can be achieved with vanilla CSS. i strongly recommend C# logic if it is possible because JS codes can be complicated and hard to maintain.

[abdolian]

I prefer we implement CSS and Blazor logic for the MVP milestone. We can use @floating-ui/core in future.