DropDown not select-able after first selection

cherron4113 commented 4 years ago

The first time I click on the Actions toggle I see the menu as expected and I can click on an item. The second time I click on the Actions toggle no menu displays. I have also tried this with no Clicked event with the same behavior. I also tried to use DropDownList instead of the menu. again it will display because it does not hide but after the first click I can no longer click on any item in the list - at least a click event isn't triggered. below is thee code I am trying to get working. I copied the example page from the Blazorise example buttons page with the same behavior. I am running vs 16.6.4 a jpg of the packages installed is attached. I only just today updated to the preview packages to see if that would fix the error.

packages

<Dropdown Direction="Blazorise.Direction.Up">
  <DropdownToggle>Actions</DropdownToggle>                                                                                        
      <DropdownMenu >
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Delete"); })">Delete</DropdownItem>
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Extend"); })">Extend</DropdownItem>
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Shrink"); })">Shrink</DropdownItem>
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Format"); })">Format</DropdownItem>
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Drive"); })">Set Logical Drive</DropdownItem>
        <DropdownItem Clicked="@(() => { DisplayAreYouSure("Label"); })">Set Volume Label</DropdownItem>
      </DropdownMenu>
 </Dropdown>

cherron4113 commented 4 years ago

code snippet.txt

stsrki commented 4 years ago

I'm trying your code snipped and it works for me. Can you check your site.css. Maybe you have some style interfering with dropdown. Also make sure you don't have any duplicate bootstrap.css in your index.html or _Host.cshtml. And lastly check that you have all these set https://blazorise.com/docs/start/#2-source-files

cherron4113 commented 4 years ago

I removed the site.css and that did not change anything. here is my index file. and import.razor. I do not see anything glaring. it did work in the blazorise demo prior to updating, but I redownloaded it again and it will not restore the webessembly 3.1 and does not work on webassembly 3.2

_Imports.razor.txt index.html.txt

cherron4113 commented 4 years ago

the bootstrap css I'm using is twitter-bootstrap@4.5.0

"libraries": [ { "library": "twitter-bootstrap@4.5.0", "files": [ "css/bootstrap.min.css", "css/bootstrap.min.css.map", "js/bootstrap.min.js", "js/bootstrap.min.js.map" ] },

stsrki commented 4 years ago

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>DxWebAdmin</title>
    <base href="/" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/all.min.css">
    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
-    <link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" />
    <link href="_content/Blazorise.Sidebar/blazorise.sidebar.css" rel="stylesheet" />
    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="js/wsinterop.js"></script>
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/Chart.js"></script>
    <script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
-    <script src="_content/Blazorise.Material/blazorise.material.js"></script>
-    <script src="_content/BlazorInputFile/inputfile.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>

</body>

</html>

You have material along with bootstrap files, try removing those. Also Blazorise have FileEditcomponent instead if BlazorInputFile, so try it instead.

cherron4113 commented 4 years ago

Thank you I followed your advice and it exposed an error in popper.js - I was using the bootstrap.min.js with the popper from cdnjs - I tried all the versions 1.0 and 2.0 version with the same error. the solution was to remover popper.js from my libman and index.html and change the bootstrap.min.js ==> bootstrap.bundle.js, which includes popper.js.

a co-worker found the solution here

https://getbootstrap.com/docs/4.0/getting-started/contents/#js-files

https://stackoverflow.com/questions/46459767/popper-js-in-bootstrap-4-gives-syntaxerror-unexpected-token-export

Megabit / Blazorise

DropDown not select-able after first selection #1151