Use of bodyContainer + multiple classNames causes an error

[alasdairhurst]

Version 2.2.0

Steps to reproduce

Use the component with className="typeahead"
Get the instance of the component and call blur() on it
Now call focus on the element

Expected Behavior

No errors occur

Actual Behavior

An error is thrown:

The issue is here:

react-bootstrap-typeahead/src/Overlay.react.js

Line 109 in 296376f

container.classList.toggle(className, !!className);

It's passing too much to the "toggle" function as seen here:

[ericgio]

This doesn't repro for me in the examples (2.3.0). Can you please provide additional information?

[alasdairhurst]

Looks like I was using 2.3.0 all along (I assumed your github pages was using the latest version when i started using the component but it says 2.2.0)

I will try to create a fiddle or something to reproduce this. Just FYI i don't think this can be reproduced in the examples page since the "focus" api example doesn't have a custom className prop.

[alasdairhurst]

https://jsfiddle.net/alasdairhurst/mgwLfodx/1/

Ah, figured it out. We don't even have to use the APIs to trigger it. bodyContainer + className with spaces (I.e multiple classes) causes the issue when the input is focused.

[ericgio]

Thanks for the repro fiddle, I'll have a look.

[ericgio]

This should be fixed as of v2.3.1

[alasdairhurst]

@ericgio What was the reason for appending the custom class name to the body? I don't see any reason why this should be done. I noticed with the fix in place, it caused some issues:

I scope my typeahead styles to ".mycustomtypeahead", but i need the menu showing in the body. That's ok - i'll just make a custom menu and set the class on that. But with this functionality, the .mycustomtypeahead class will be applied to the body of my page, causing the styles set on that class to be applied to everything on the page.

There are a few workarounds such as .rbt.mycustomtypeahead or :not(.rbt-body-container) but something doesn't seem right.

At the very least, i'd make it clear in the docs that any classes set on the typeahead component could be set on the body as well, but i'm questioning the need.
Now, it could be just for overall scoping, but i'd say using .rbt-menu for any menu selections would be better.