React-bootstrap-typeahead: Clicking on highlighted text in menu doesn't select the item
Version
2.0.0.alpha-3
Steps to reproduce
When attribute allowNew is set to true, and when typing new selection, if you click on highlighted text, click does not work
Expected Behavior
It should trigger selection where ever you click on link with new selection
tomislavhren
All 23 comments
Thanks. Got a similar report a few days ago but couldn't repro. I now realize you need to click the highlighted text
ericgio
on 25 Aug 2017
For me - clicking on any of the text (span wrapper) doesn't work, but clicking outside of the text does.
jasonmullins
on 25 Aug 2017
@jasonmullins: Yeah you're right, I'm seeing that behavior on second look.
ericgio
on 25 Aug 2017
I don't know about anyone else, but this happens for me without the 'allowNew' flag. It's just clicking on any of the menu options text in general that doesn't work.
alexgurr
on 5 Sep 2017
@alexgurr: That's correct.
I've been trying to fix this, but I'm not clear on why it's happening. The problem originally surfaced as a result of this commit. It appears that when the text is highlighted, the click doesn't bubble up to the anchor for some reason. There also seems to be some conflict with the input blur and focus events. The solution may be to listen to the mousedown event rather than click, which should also address #224.
ericgio
on 5 Sep 2017
@ericgio happens for me even when the text isn't highlighted. Happens in every state.
alexgurr
on 5 Sep 2017
@alexgurr: I don't repro that, at least on Chrome. When no text is entered, it works fine. It's only when there's at least one highlighted character that it stops working. There's also no issue when using renderMenu or renderMenuItemChildren. The issue seems potentially related to the react-highlighter lib but I don't see anything in that code that would cause an issue.
ericgio
on 5 Sep 2017
@ericgio maybe I'm misunderstanding what you mean by highlighted text. I can reproduce this when I type something into the input, and get results in my AsyncTypeAHead menu. Can't click any of the text options in the menu. Is this what we're referring too?
alexgurr
on 5 Sep 2017
Yes, if any of the text is highlighted because it matches the text in the input, then the bug repros. If there are no highlighted characters, it works fine.
ericgio
on 5 Sep 2017
Ahhh now I understand what you mean by highlighted characters - the bold highlights that match the input content. OK, we're on the same page. Seems to be the same issue then.
alexgurr
on 5 Sep 2017
@ericgio is talking about the part of the text that is enclosed in a span with a class that makes it bold (the part that matches the search text). I think there is some confusion regarding highlighting the text by selecting it with the mouse, etc, verses the span that gets marked as "highlighted" or "matches".
jasonmullins
on 5 Sep 2017
@ericgio Looks like its fixed on your demo page, any ETA on releasing this fix?
tintin64
on 21 Sep 2017
The main demo page is v1.4, but the issue in question is a regression in v2.0. I don't have a fix yet, unfortunately.
ericgio
on 21 Sep 2017
@ericgio
I found out that if you put pointer-events: none; on <strong>some highlighted text in menu</strong> it works that, you can click on both highlighted text or anywhere within that link
tomislavhren
on 22 Sep 2017
@tomislavhren: Thanks for the tip! Will try to publish a fix as soon as I can.
ericgio
on 5 Oct 2017
Is there any workaround until a fix will be deployed ? thank you for your answer.
Gulivertx
on 9 Oct 2017
This is now fixed in v2.0.0-alpha.4. Apologies for the delay.
ericgio
on 12 Oct 2017
Still not, maybe it is not the same trouble ....
When I click on a text in a select it's not working, if I click just next to the text the selection is OK.
Gulivertx
on 12 Oct 2017
@Gulivertx: I don't know what your issue is. The issue referenced on this thread should be fixed if you update to the latest version. If you're still seeing an issue, can you please open another ticket with specific repro steps? Thanks.
ericgio
on 12 Oct 2017
@ericgio I'm also still seeing this issue on .v4. I only have a very basic component <Typeahead options={options} />
Repro:
- Type something so there are matches (don't press enter or arrow keys or anything).
- Click on the word for one of matches. - Nothing happens. (Occasionally flashes the selected color on the row)
- Click next to the same word. - Selects that item and menu closes.
The same thing seems to happen if you've pressed the 'down' arrow to select one of the items. They just don't seem to respond to clicking on the text itself.
Edit: Ohhhhh, I was using versioned CSS from our CDN and I did not update that when I updated the package. I didn't realize that the fix for the highlighter was in the CSS. Confirmed as fixed over here! Sorry for the false alarm.
sorahn
on 12 Oct 2017
I didn't realize that the fix for the highlighter was in the CSS. Confirmed as fixed over here! Sorry for the false alarm.
Yup. Glad it's working for you.
ericgio
on 12 Oct 2017
Yes sorry, after importing your last CSS code everything works fine ! Thank you for the fix
Gulivertx
on 15 Oct 2017
Just for posterity, this issue was potentially related to: https://github.com/helior/react-highlighter/issues/20
ericgio
on 29 Oct 2017
Related issues
DaveyEdwards
路
5Comments
daniel-carrillo-globant
路
5Comments
hyzhak
路
8Comments
jtmunn
路
4Comments
hslojewski
路
3Comments
Most helpful comment
@ericgio is talking about the part of the text that is enclosed in a span with a class that makes it bold (the part that matches the search text). I think there is some confusion regarding highlighting the text by selecting it with the mouse, etc, verses the span that gets marked as "highlighted" or "matches".