This is a migrated thread and some comments may be shown as answers.

DropDownList with Radio Button Not Working

6 Answers 321 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kara
Top achievements
Rank 1
Veteran
Kara asked on 12 Nov 2019, 11:38 PM

I have a dialog popup with some scheduling options that I have created. For one component I have two radio buttons and each radio button is a set of DropDownLists and NumericTextBoxes. The radio button styling works fine with the NumericTextBox, but with the DropDownList I have problems with the dropdown actually opening. It will flicker when you click on it and you must click it multiple times before it will fully open and stay open. I have added the className="k-radio-label" to the DropDownList and that seems to be where my issue is. Is this a known bug and is there a workaround? The selection of the radio button is working, it just seems to be an issue with the dropdown animation.

Here is a snippet to give you some idea:

<div>
            <label 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}
              />
            </label>
</div>

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Nov 2019, 07:39 AM

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 >
Please give this a try and let me know if the issue still occurs.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kara
Top achievements
Rank 1
Veteran
answered on 13 Nov 2019, 04:15 PM

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

0
Stefan
Telerik team
answered on 14 Nov 2019, 07:42 AM

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"
 
2) The radio buttons are intended to be used in a group, having a single radio button will not work as expected because once a radio button is checked, the only why to uncheck it is to check another radio button in the same group. If the desired result is to check and uncheck a single value, please use the checkbox.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kara
Top achievements
Rank 1
Veteran
answered on 14 Nov 2019, 04:54 PM

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

0
Stefan
Telerik team
answered on 18 Nov 2019, 08:05 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kara
Top achievements
Rank 1
Veteran
answered on 20 Nov 2019, 09:20 PM

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

Tags
General Discussions
Asked by
Kara
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Kara
Top achievements
Rank 1
Veteran
Share this question
or