bootstrap-select: Cannot read property 'options' of undefined

GREAT PLUGIN! Thanks for the hard work.

A javascript error is thrown when combining data-live-search="true" with option groups

In boostrap-select.js (line 1363):

if (that.options.liveSearch) $parent = $this.parent().parent();

Example:

<select id="sel_assign"
    class="selectpicker"
    data-width="100%"
    data-size="auto"
    data-live-search="true"
    title="Select an Assignee">
    <optgroup label="Crew Members">
    <option value="1">Smith</option>
    </optgroup>
</select>

Help!

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 4
Comments: 33 (10 by maintainers)

Commits related to this issue

Correctly looking for a parent Fix buggy workaround to find the wanted parent, fixed #1085 at least for me. — committed to hems/bootstrap-select by hems 6 years ago
use closest to get the parent element (silviomoreto/bootstrap-select#1085) — committed to snapappointments/bootstrap-select-temp by caseyjhol 6 years ago

Most upvoted comments

Thanks for the heads up. Also, please be sure to star and follow https://github.com/snapappointments/bootstrap-select instead, as that’s where all of my development will be from now on.

caseyjhol on May 19, 2018

Instead of posting +1, it would be more helpful if somebody could post an example. Then, I can properly debug and fix the issue.

caseyjhol on Feb 27, 2018

Example: searchable select inside the popover(same error): https://jsfiddle.net/zenyn6d9/4/

Click on link -> Try to search -> Got error: bootstrap-select.js:1624 Uncaught TypeError: Cannot read property ‘options’ of undefined at HTMLInputElement.keydown (bootstrap-select.js:1624)

artiomgiza on Mar 4, 2018

bug not fixed

Jesseszhang on Sep 7, 2016

@artiomgiza The reason it’s not working in your example is because you’re simply setting the popover content to be the same as the generated HTML. You need to set the content to be the actual DOM node. Use $("#popover-content").children() instead of $("#popover-content").html() to reference the DOM node: https://jsfiddle.net/zenyn6d9/5/.

@freemh Any chance you can link me to an example?

@hems Any chance you can link me to an example?

@kpace Any chance you can link me to an example?

caseyjhol on May 17, 2018

Same Problem when using the tab key to navigate through the form:

1.12.4 version

Uncaught TypeError: Cannot read property '$newElement' of undefined
    at HTMLButtonElement.keydown (bootstrap-select.js:1638)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
keydown @ bootstrap-select.js:1638
dispatch @ jquery.js?ver=1.12.4:3
r.handle @ jquery.js?ver=1.12.4:3

After I upgrade to the 13.0.1 version, I got the following error when navigating through the form using tab key:

bootstrap-select.js:2319 Uncaught TypeError: Cannot read property 'findLis' of undefined
 at HTMLButtonElement.keydown (bootstrap-select.js:2319)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)

arbaouimehdi on May 11, 2018

Any fix on this?

kpace on Apr 12, 2018

still the same issues

Jesseszhang on Sep 7, 2016

@jtfairbank This was just an attempt to hack the source of this plugin to make it work. Thanks for the heads up regarding .closest(), which I agree with wholeheartedly. @caseyjhol With apologies, I don’t have time to be of further assistance.

rmirabelle on Sep 13, 2015

Possibly fixed by adding another call to parent() in boostrap-select.js (line 1300)

So instead of this

$parent = $this.is('input') ? $this.parent().parent() : $this.parent(),

Do this

$parent = $this.is('input') ? $this.parent().parent().parent() : $this.parent(),

Though I have not thoroughly tested to see if this referencing fix would break something else

rmirabelle on Jul 3, 2015