Skip to content

fix: Using Escape to close Popover gets error "Cannot read properties of null (reading 'focusableElement')" #3012

@Netius

Description

@Netius

🐛 Bug Report

Pressing Escape to dismiss / close popover throws a error "Cannot read properties of null (reading 'focusableElement')".
I traced error to the file FluentAnchoredRegion.razor.js

Using Popover from demo also throws error - https://www.fluentui-blazor.net/Popover

💻 Repro or Code Sample

Go to demo https://www.fluentui-blazor.net/Popover
Press the button Open Callout 1 and press Escape on keyboard .
See error on the browser / console

🤔 Expected Behavior

Focus on the body or original button when dismissing / closing the popover

😯 Current Behavior

Pressing Escape closes the popover but throws error

💁 Possible Solution

I added in FluentAnchoredRegion.razor.js

export function goToNextFocusableElement(forContainer, toOriginal, delay) {

var container = typeof forContainer === "string" ? document.getElementById(forContainer) : forContainer;

**_if (container == null) container = document.querySelector("body");_**  MY CODE

🔦 Context

🌍 Your Environment

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
  • Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
  • .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageNew issue. Needs to be looked at

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions