DropDownList with Radio Button Not Working

Hello, Kara,

Thank you for the details.

We had similar reports and they all have been connected to the DropDownList being wrapped inside a label. This occurs because the label steals the focus which causes blur on the DropDownList and it is immediately closed.

The solution is to wrap it inside a span instead of a label:

            <span className="k-form-field display-inline">
              <span>Every:</span>
              <input
                type="radio"
                value="repeatWeek"
                id="rptWeek"
                className="k-radio"
                checked={this.state.dayInterval === 'repeatWeek'}
                onChange={this.handleRadio}
              />
              <DropDownList
                className="k-radio-label"
                data={weekNumbers}
                onChange={this.setWeekOfMonth}
                defaultValue={weekSelected}
              />
            </span >

Regards,
Stefan
Progress Telerik

Stefan,

Thanks for your quick response. Unfortunately, that causes the radio button to not work even though it is controlled, but the dropdown animation works. 

Kara

Hello, Kara,

After additional investigation, I noticed the following:

1) The DropDownList has a class on k-radion-label, which is only intended for radio buttons, not the DropDownList. Please remove that class from the DropDownList:

              <DropDownList
                className="k-radio-label"
 

Regards,
Stefan
Progress Telerik

There is a group of radio buttons, I condensed the code down for the purpose of sharing the specific issue I was seeing. I have two radio buttons so that the user can toggle between the two input choices. 

To give some context, it is a popup dialog that allows the user to select scheduling options on a daily, weekly, monthly, etc for a report export. For the monthly they have the ability to pick a specific day of the month every x number of months, or they can choose a week of the month and specific day of that week. I would love to have direct access to that popup that the kendo Scheduler uses for editing and modify it for our purposes, is that a possibility? 

It seems like the k-radio-label just groups the item to the button so that it knows what goes with it. It works fine with the NumericTextBox and behaves as I would expect. If I click on the NumericTextBox it will select the radio button. I want that to occur for the DropDownList as well. It doesn't seem to affect the usage. The real issue is with the DropDownList inside the label. Is there a solution in the works for this?

Kara

Hello, Kara,

Thank you for the additional details.

Regarding the questions:

1) Access to the Scheduler editor is planned for the next official release(Mid January). We will provide a render function that will allow customizing the editor to achieve specific scenarios.

2) Currently, the issue with the label stays as this is how the label functions and steals the focus. What I can suggest in this case is to use the DropDownList onOpen event and programmatically check the radion button. This will create the same effect as checking it on a click of the NumerticTextBox:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-onopen

I made an example showcasing this approach:

https://stackblitz.com/edit/react-1gnbzt?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

I ended up rearranging my form elements with flexbox and removed them from being k-form-fields, and I moved the DropDownList outside of the label div and instead have the radio label attached to a span. It's working pretty well with this arrangement. I will add something to the appropriate fields that will auto-check the radio button like you suggested.

Thanks,

Kara