Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 06 Sep 2023 15:29 by ADMIN
Release R3 2023
Jeremy
Created on: 05 Sep 2023 16:34
Category: FormDecorator
Type: Bug Report
0
Fix pressing tab or enter key does not close the RadFormDecorator dropdownlist popup

This issue is reproducible on your demo page: https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx

  • Navigate to the sample drop down list control.
  • Open the list.
  • Select an item either by typing the first letter of an item or using the arrow keys.
  • Press the <Enter> or <Tab> key.

The expected behavior is the drop down list will close. It does not. However, if you collapse the list with the mouse or <Alt>+<Up Arrow> and then open the list again, the <Enter> and <Tab> keys will behave as expected.

As this problem is also present on your demo site, it is likely a bug with the RFD product and not our specific use case. If there is an update to the product or a JavaScript workaround, that would be greatly appreciated.

3 comments
ADMIN
Rumen
Posted on: 06 Sep 2023 15:29

Thank you, Jeremy, for testing and confirming! Considering that the official release is just a month away, I'll leave it to your discretion whether to implement the script now or wait for the official launch.

Have a nice and successful day!

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
Jeremy
Posted on: 06 Sep 2023 15:11

Greetings Rumen!

Thank you for the quick response. I did use the script you provided and it appears to be working.

I am not certain if we will use the JavaScript fix or wait for the update, but it is nice to have both options available.

Thank you!

-Jeremy

ADMIN
Rumen
Posted on: 06 Sep 2023 10:55

Hi Jeremy,

Thank you for reporting this glitch! I agree with you that the user should be able to close the popup using the Tab, Escape, and Enter keys so I converted your ticket to a public bug report.

The fix will get available in the upcoming R3 2023 release in mid-October 2023. Until then, you can try this function override:

        <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All" />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="135px" TabIndex="3">
            <asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
            <asp:ListItem Text="Drama" Value="2"></asp:ListItem>
            <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
            <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
            <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
            <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
            <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
        </asp:DropDownList>
        <script>
            Telerik.Web.UI.FormDecorator.DecoratedSelectKeyboardProvider.prototype._hidePopup = function () {
                var popupBehavior = this._formDecorator._popupBehavior;

                if (popupBehavior && window.getComputedStyle(popupBehavior.get_elementToShow()).visibility == 'visible') {
                    this._togglePopup();
                }
            }
        </script>

Give it a try and let me know the result. 

As a small note of gratitude for your report, I've updated your Telerik points.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
Create an account Log In
View
Type
Status
Category