React Wrapper Dropdown list is detacted from heading when scrolling

[keithnolan00]

• Bug report

Current behavior

Using the Kendo Dropdownlist React Wrapper 2018.1.221 when the a page is scrolled and the dropdown is selected the list of items is detached from the heading and is displayed further down the page. I have the same issue fixed on other libraries (Angular, JQuery).

Expected behavior

Body of list should appear under heading

Minimal reproduction of the problem with instructions

My code is pretty striaght forward. It is like:

render() {		
		return (			
			<div className="form-group row" id={this.props.fieldName}>
				<label className="col-sm-4 col-form-label">{this.title}</label>
				<div className="col-sm-8">
					<DropDownList
						placeholder={this.placeholder}
						select={this.onChange}
						value={this.props.value}
						dataSource={this.props.lookupData}
						dataTextField={this.textField}
						dataValueField={this.valueField} />
				</div>
			</div>
		);		

What is the motivation or use case for changing the behavior?

Environment

Browser:

• Chrome (desktop) version Latest
• Firefox version Latest
• IE version 11

[simonssspirit]

@keithnolan00 This issue should be fixed in the latest version of the components. As the wrappers components have a peer dependency to Kendo UI, please ensure that the application is using the latest version of Kendo UI and of the wrappers.

I made a similar example and it is working as expected on my end: https://plnkr.co/edit/y9KydY7ArJ5m3CTFRJ5b?p=preview

If the same result is observed after updating, please modify the example to replicate the real application scenario and we will continue with the investigation.

[mitagg]

This is related to the following issue - telerik/kendo-ui-core#3624.

[keithnolan00]

I am still having this issue, it only seems to happens in Chrome and Firefox. I can't recreate it in Plunker, it only occurs when the browser presents the scroll bar. If you give a container an explicit height and scroll using the scrollbar the problem is not visible. I have no explicit heights set anywhere in my application. I know this isn't much help in recreating the issue. I have also tried the solution from telerik/kendo-ui-core#3624

I have tried with all the latest Kendo components.

[simonssspirit]

@keithnolan00 If the issue is still reproducible I can suggest submitting a ticket in the support portal where we can continue with the investigation. We can exchange runnable examples(not Plunker) and try to locate the issue. This is recommended as the issue could be caused by a factor which we are overlooking at this moment, as the standard implementation is not reproducing it.

When you open the ticket, please link this issue, so I can take the ticket.