Input field in dialog loses focus immediately after clicking in it

[patrikhellgren]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• Edge 139
• SPFx 1.20

Describe the bug / error

We have a few different SPFx solutions with dialogs, both command set extensions and web parts. Some time during the last few weeks or so (unfortunately not sure exactly how long ago) these dialogs has stopped working. What we have seen is that when the dialog have text input fields and you click in the field to focus it, it immediately loses focus and you cannot input anything. In the case of command set extensions I can see that when you start typing the "Select all" radio button and the first list row behind the dialog becomes focused.

This issue seems a bit intermittent, sometimes it happens all the time, sometimes I cannot seem to reproduce it and sometimes I can get rid of it by reloading the page and then reproduce it again by doing a hard refresh.

We can reproduce this in multiple tenants.

The different solutions we have seen the issue with are of different SPFx versions, 1.12, 1.17 and 1.20.

Steps to reproduce

1. I can reproduce the issue by following https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx and serving it in both lists and document libraries.
2. After serving it, select an item so the command set button is displayed
3. Click the button
4. When the dialog is displayed, click in the Alpha input field and you will see that the cursor flashes quickly one time and then disappears and if you start typing nothing happens except that some elements in the list view behind the dialog are focused.

Expected behavior

Text input fields in dialogs should work as input fields.

[Ashlesha-MSFT]

Hello @patrikhellgren,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Amey-MSFT]

Hello @patrikhellgren,
We were able to reproduce the issue, and we are investigating it. We have logged this as a bug, and our engineering team will look into it.
Thank you!

[JohnMurryVinci]

This is also happening to my custom dialog box. Not only are the text field not getting focus, but also on the PeoplePicker. The text field is from 'office-ui-fabric-react' and the People Picker from '@pnp/spfx-controls-react/lib/PeoplePicker'

The is happening 90% of the time. Sometimes a page refresh fixes it, but most times it does not.

Also using SPFx version 1.20.
Chrome versions:
Version 137.0.7151.120 (Official Build) (64-bit)
Version 138.0.7204.35 (Official Build) (64-bit)

Edge
Version 138.0.3351.42

[NoodleTime131]

We are also experiencing this same issue in our custom dialog box - also with a text box and a PeoplePicker. The dialog tends to work on initial load (but not always) and then never again.
Would greatly appreciate a resolution.