Using react-bootstrap-typeahead - Text is being blurry

Question

I'm using React Bootstrap Typeahead package in my project, and I encountered an issue when the text is being blurry.
Steps to reproduce:

1. Go to https://codesandbox.io/s/nostalgic-payne-n4y9e6
2. Start type "Alabama-Alabama-Alabama".
3. Text is blurry in the end.
4. If you don't get it, just type "Alabama-Alabama-Alabama" and try to delete some characters.
5. You will see something like this:
   
   

I already opened a ticket about this issue, but I was wondering if someone has a solution for this until an official fix? Thanks.

Answer 1

In your JSON file, you have the following:

{
  label:
    'Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-Alabama-',
  population: 4780127,
  capital: 'Montgomery',
  region: 'South',
},

Compare to this working react-boostrap-typeahead sandbox. Probably delete that issue.