search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

TextField component throws error on autofill #177

Closed rauloaida closed 9 months ago

rauloaida commented 9 months ago

Summary: when using the reshaped.so TextField component in a Next.js project, an error is thrown every time the users selects an autofill value pre-stored in their browser. Happens across both Chrome & Safari. Issue is persistent from Reshaped v2.0.3 to v2.3.2.

Steps to replicate:

  1. Open your IDE of choice.
  2. Clone my example repo OR you can use the app I deployed to vercel.
  3. Run npm install && npm run dev.
  4. In your browser, open the localhost url & port.
  5. Open your browsers debug console.
  6. Click on TextField component to focus and select an autofill value. If no autofill value is present, I found Safari allows you to generate a random autofill email address to use.
  7. Observe error. See attached screenshots/recording for reference.

Versions:

Screenshot 2023-09-21 at 2 16 36 PM Screenshot 2023-09-21 at 2 15 35 PM
blvdmitry commented 9 months ago

Hey, this error looks like something that can be happening if your application is not wrapped with Reshaped provider, can you check if that's the case?

JeromeDane commented 9 months ago

Yep, it's wrapped. Here's the implementation in the minim reproducible example: https://github.com/rauloaida/autofill-bug/blob/main/src/app/page.tsx

image
blvdmitry commented 9 months ago

Trying to reproduce it here but can't make it throw an error. Does it still happen for you there? https://codesandbox.io/s/quizzical-germain-82r88g?file=/src/App.tsx

rauloaida commented 9 months ago
Screenshot 2023-09-25 at 10 01 59 AM

Seems to do it for me in the sandbox too. I opened a incognito tab just in case. It also happens on other machines/users that tried this on my team.

blvdmitry commented 9 months ago

Got you. Can't reproduce this yet but I think this means that in some cases handleKeyUp can get triggered without the correct event. I'll release a patch for this later today and going to let you know so you can confirm it works, thanks for the heads up!

blvdmitry commented 9 months ago

Turns out browsers trigger keydown/keyup events when you're clicking on the autocomplete with your mouse. In that case event.key is undefined. I've added additional checks to prevent the errors from happening in that case. Going to release a patch with the fix and share here once it's live. Looking at one more issue reported to resolve them together

blvdmitry commented 9 months ago

Released 2.4.2 with the changes, can you check if it works as expected for you now?

rauloaida commented 9 months ago

This fixed it! amazing, thank you!