Fast: JS error when using fast-dialog in a Blazor app

Created on 6 Nov 2020  路  6Comments  路  Source: microsoft/fast

Describe the bug; what happened?
The use of a fast-dialog component on a page causes an Uncaught TypeError 't.querySelectorAll is not a function error' to occur.

What are the steps to reproduce the issue?

  1. Create a new Blazor Webassembly project following the integration guidelines [https://www.fast.design/docs/integrations/blazor]
  2. Add a fast-dialog to the bottom of the Index.razor page:
<fast-dialog hidden=@(!IsActive)>
    <h3>A FAST Dialog Component</h3>
    <div>
        <fast-button appearance="accent" @onclick="@((e) => IsActive = false)">
            Hide Dialog
        </fast-button>
    </div>
</fast-dialog>
<fast-button appearance="accent" @onclick="@((e)=> IsActive = true)">
    Show Dialog
</fast-button>

@code
{
    public bool IsActive { get; set; }
}
  1. Start the application
  2. When application is running in the browser, press F12 to open the Console window
  3. Press F5 several times to refresh the browser window
  4. This error appears in the console window:
Uncaught TypeError: t.querySelectorAll is not a function
    at xo (fast-components.min.js:15)
    at MutationObserver.onChildListChange (fast-components.min.js:15)

If applicable, provide screenshots:

image

In what environment did you see the issue?

  • OS & Device: Windows10
  • Browser Microsoft Edge 86.0.622.61, Google Chrome 86.0.4240.183
fast-components bug request in-progress needs-investigation

All 6 comments

@LucSuy Does this error only happen intermittently? You mention pressing refresh several times so I wanted to get some clarification on that. Thank you!

@LucSuy Does this error only happen intermittently? You mention pressing refresh several times so I wanted to get some clarification on that. Thank you!

@EisenbergEffect Just tested it again. Pressing F5 causes the error to appear "most of the times", when pressing CTRL+F5 the error appears "sometimes". If you wish I can make some screen recordings of it.

@LucSuy No need for the screen recordings. I'll dig in and make sure I can reproduce this and see if I can tell what's going on. Thanks!

I finally got around to looking into this. Apologies for the delay @LucSuy I've got a PR up that should fix the problem. I need a few other team members to review it though as this may have uncovered some additional issues with the dialog and I need folks more familiar with some of those details to take a look. Thanks for your patience!

@EisenbergEffect thanks a lot for the fix.
And yes, as you state "_Given the nature of this bug, I'm not sure that tabbable was working correctly with the dialog ever._", I indeed encountered tabbing problems in the dialogs too.

@LucSuy Thank you for the confirmation 馃槃 Hopefully this will address the other issues as well. Side note: we're in process on making some decisions and getting moving on some new e2e tests for our components, so those should help mitigate issues like this in the near future.

Was this page helpful?
0 / 5 - 0 ratings