DateTimePicker, DatePicker and TimePicker does not work correctly within a Boostrap Modal

1 Answer 43 Views
DatePicker
Daniel
Top achievements
Rank 1
Daniel asked on 02 Nov 2023, 03:14 PM

Hi,

I´ve tried the DateTimePicker, DatePicker and TimePicker and they all work great but not when I put them inside a Boostrap Modal.

If I have a TextBox followed by a DatePicker inside an opened Bootstrap Modal and then click the calendar icon in the DatePicker the TextBox gets focused.

Is there a way around this behaviour?

/Daniel

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 07 Nov 2023, 09:42 AM

Hi, Daniel,

In general, the Bootstrap modal doesn't allow any element outside of it to receive focus. However, the popups of our components are not rendered in their place of declaration but as a child of the TelerikRootComponent at the root of the Blazor app. This results in them being outside of the Bootstrap modal.

There are a few ways to get out of this situation:

  1. Check if the Bootstrap modal has a setting to allow focus outside of it. For example, Bootstrap 5 has data-bs-focus="false".
  2. If the modal does not have such a setting, you will have to replace it with our Window or another modal of your choice.

Let me know if additional questions arise.

Best regards,
Georgi
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!
Tags
DatePicker
Asked by
Daniel
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or