Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Google Translate triggers error

See original GitHub issue

Hello all,

I am using react-bootstrap-typeahead on my landing page and thanks to Sentry I have realized that my website crashes when someone using Google Chrome enables translation for my website.

Version

"^5.1.4

Steps to reproduce

Visit www.kindoi.com using Google Chrome
Enable translation
Start typing in the search box

You will see the entire app crashing (Yes, I know I should have placed an error boundary!)

I will update the code in a few days, specifically, I want to place <html translate="no"> as a workaround, however, I will wait for a maintainer to respond before doing that. So someone can take a look at the real crash.

Expected Behavior

No error happens

Actual Behavior

From the stack error it seems the crash comes from this package:

The above error occurred in one of your React components:
    at Highlighter (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/Highlighter.js:50:86)
    at a
    at eval (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/MenuItem.js:19:21)
    at WrappedMenuItem (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/behaviors/item.js:91:85)
    at div
    at Menu (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/Menu.js:94:86)
    at TypeaheadMenu (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/TypeaheadMenu.js:51:24)
    at InnerPopper (webpack-internal:///../node_modules/react-popper/lib/esm/Popper.js:48:35)
    at Popper (webpack-internal:///../node_modules/react-popper/lib/esm/Popper.js:212:31)
    at Overlay (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/Overlay.js:115:24)
    at div
    at RootClose (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/Typeahead.js:142:23)
    at TypeaheadManager (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/core/TypeaheadManager.js:27:24)
    at Typeahead (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/core/Typeahead.js:304:86)
    at TypeaheadComponent (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/components/Typeahead.js:163:86)
    at eval (webpack-internal:///../node_modules/react-bootstrap-typeahead/es/behaviors/async.js:178:164)
    at Typeahead (webpack-internal:///./features/Typeahead/Typeahead.tsx:48:22)
    at div
    at div
    at form
    at div
    at div
    at SearchForm (webpack-internal:///./features/SearchForm/SearchForm.tsx:75:75)
    at div
    at div
    at Landing

My Typeahead wrapper component just does this:

return (
    <AsyncTypeahead
      filterBy={filterBy}
      id={`${name}-typeahead`}
      isLoading={isLoading}
      minLength={1}
      onSearch={getSuggestions}
      options={suggestions}
      placeholder={placeholder}
      promptText={promptText}
      searchText={searchText}
      emptyLabel={emptyLabel}
      labelKey={render}
      onChange={onSelect}
      onInputChange={onInputChange}
      isInvalid={isInvalid}
    >
      {({ onClear: onTypeaheadClear, selected }) => (
        <div className="rbt-aux">
          {selected && selected.length >= 1 && (
            <ClearButton
              onClick={async e => {
                await onClear(e);
                await onTypeaheadClear(e);
              }}
            />
          )}
        </div>
      )}
    </AsyncTypeahead>
  );

Last but not least, this issue seems to be highly related to https://github.com/facebook/react/issues/11538

Thank you in advance and regards

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

javierguzmancommented, Jan 31, 2022

Thank you @ericgio for the clear explanation! Indeed, the scenario you have shown is a nasty one. Ideally, it would be great to have the ability to tell the translator something like “hey, do not translate this single word, it is kind of a a substring” or something like that. Or maybe, from my ignorant point of view, is there another way to implement the highlight to avoid this?

In any case, if I am the end user the ideal scenario for me would be that if I search for California, I would like to see, California translated, which it seems not possible due to the highlight that is why you recommend disabling it.

I think for now this issue has enough information at least for me. For sure, I am going to leave the translate=“no” option. In addition, I will think about disabling the highlight because for me is a nice feature though. I plan to play more with translation in future, so it would be ok for me to close this issue for now and I can always re-open when I start messing around again 😄 I might open also an issue on the Google translator tracker if there is one as this is something related to how translators work in general I believe.

0reactions

javierguzmancommented, Feb 7, 2022

Thank you again @ericgio ! That would be a perfect solution for me. Interestingly, so far with the translate=“no”, it just disables the automatic translation. However, the user using Chrome can still right click and click on translate, this will not provoke a crash and will work ok.

Anyway, as I mentioned previously, I think from my side this is pretty much solved. So thank you very much for all the help.