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

Conflict w/ bootstrap.js & dropdownlist

12 Answers 1243 Views

DropDownList

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

AshkanD asked on 29 Apr 2014, 01:24 AM

There seems to be a conflict with the DropDownList widget when bootstrap.js (version 3.1.1) is also referenced.

When you click down arrow the selection moves to the next item but the dropdown closes.

Left & right arrows work properly. If you switch to bootstrap version 3.0.0 arrow keys work fine.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css">
</head>
<body>

<div id="example" class="k-content">
<div id="cap-view" class="demo-section">
<h2>Customize your Kendo Cap</h2>
<div id="cap" class="black-cap"></div>
<div id="options">
<h3>Cap Color</h3>
<input id="color" value="1" />

<h3>Cap Size</h3>
<select id="size">
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>

<button class="k-button" id="get">Customize</button>
</div>
</div>
<style scoped>
.demo-section {
width: 460px;
height: 300px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 30px;
}
#cap {
float: left;
width: 242px;
height: 225px;
margin: 20px 30px 30px 0;
background-image: url('../../content/web/dropdownlist/cap.png');
background-repeat: no-repeat;
background-color: transparent;
}
.black-cap {
background-position: 0 0;
}
.grey-cap {
background-position: 0 -225px;
}
.orange-cap {
background-position: 0 -450px;
}
#options {
padding: 1px 0 30px 30px;
}
#options h3 {
font-size: 1em;
font-weight: bold;
margin: 25px 0 8px 0;
}
#get {
margin-top: 25px;
}
</style>

<script>
$(document).ready(function() {
var data = [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
];

// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});

// create DropDownList from select HTML element
$("#size").kendoDropDownList();

var color = $("#color").data("kendoDropDownList");

color.select(0);
var size = $("#size").data("kendoDropDownList");

function onChange() {
var value = $("#color").val();
$("#cap")
.toggleClass("black-cap", value == 1)
.toggleClass("orange-cap", value == 2)
.toggleClass("grey-cap", value == 3);
};

$("#get").click(function() {
alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value());
});
});
</script>
</div>

</body>
</html>

12 Answers, 1 is accepted

Accepted

answered on 01 May 2014, 03:21 PM

Hi Ashkan,

Thank you for the details. I discussed this case with my colleagues and it appears the observed behaviour is related to a feature of the Bootstrap. As an explanation:
The DropDownList widget has a WAI-ARIA role="listbox", required for the ARIA support. On the other hand, Bootstrap wires keydown event of all elements if they have such role:

$(document).on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)

When keydown is raised, under certain conditions, the element is clicked and our widget toggles. Check line 68 from the Bootstrap code for more information.

As this is a globally applied function and we cannot make anything special in this case, the only workaround for this is to stop event propagation of dropdownlist's wrapper. Here is a simple example which demonstrates this approach in action.

Regards,
Iliana Nikolova
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 26 Aug 2014, 09:33 PM

I ran into the same issue. Instead of resolving it (but breaking cascade dropdowns) on the Telerik side using the above work-around, I used the following work-around to unbind the Bootstrap DropDown keydown event from [role="listbox"]:

1.$(document).off("keydown.bs.dropdown.data-api")

2. .on("keydown.bs.dropdown.data-api", "[data-toggle='dropdown'], [role='menu']",

3. $.fn.dropdown.Constructor.prototype.keydown);

which should still allow you to use most of the Bootstrap DropDown component and the Telerik Cascading DropDowns (admittedly untested as my project doesn't currently use either).

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Conflict w/ bootstrap.js & dropdownlist

12 Answers, 1 is accepted