This page crashed - URI malformed - When inserting win10 keyboard emoji on api field

[jNullj]

This was first detected in badges/shields#9519, Read more there
I can reproduce this on docusaurus-openapi.netlify.app

1. Go to https://docusaurus-openapi.netlify.app/petstore/get-user-by-user-name/
2. Select the username text input field
3. Open win10 on screen keyboard (the one that pop-ups from bellow, not the old win7 version)
4. Select an emoji
5. Get page crash with URI malformed

[jNullj]

More findings:
I see a diff with events data when using windows on-screen keyboard and emoji shortcut (winkey+.)
With on-screen keyboard when the issue appears:

With the emoji picker (win+.) when there is no issue:

[jNullj]

Found the bug!

We are using encodeURIComponent to convert to a URI in the api call, but encodeURIComponent does not work with the unicode format '\uD83C' that the keyboard outputs insted of the emoji itself.

This can be found in https://github.com/cloud-annotations/docusaurus-openapi/blob/main/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/buildPostmanRequest.ts

I can make a pull request fixing this

[jNullj]

Was too quick, this is not a valid unicode, i need to keep debugging

[jNullj]

Ok new insight, this is probebly related to onInput event.
It appears that when i type using onInput the emoji start as non-exitsting unicode like \uD83C then the input continues and completes it into the pizza emoji.
But our code tries to use encodeURIComponent in this middle state where only partial emoji was registered by onInput

[jNullj]

Confirmed using this textbox on github. I asked it to print to console the onInput event and from 1 emoji input using the keyboard i get 2 onInput events

Ok you learn something new everyday, those are UTF-16 Encoding for emoji

So i get that the onInput meets half an emoji from the UTF-16 emoji and sends it to encodeURIComponent which fails

Will PR today or tomorrow with a solution

[bourdakos1]

Good find! Thanks for looking into this :)