ory/elements

TypeError: null attempting to click Submit button using Safari - iOS 15.3

Opened this issue · 1 comments

Preflight checklist

Describe the bug

TypeError: null is not an object (evaluating 'y.name') is what is shown in the Developer Tools console, found in Safari. One must use Safari's developer tools to see the error outputs from an Xcode simulator.

image

Reproducing the bug

  • Install Ory Element's React SPA example. I used the instructions from README.md file
  • Fire up Vite via npm run dev -- --port 3000 and Ory Tunnel via ory tunnel http://localhost:3000 --project <project-slug> --dev
  • Install a simulator with iOS 15.3 or 15.2 via Xcode
  • Push the logical home button so that you can go to the Safari browser
  • Navigate to http://127.0.0.1:3000
  • At this point, I advise having your Mac's Safari open so you can see the log output for your simulator
  • Press Submit on the sample login form

Relevant log output

[Error] TypeError: null is not an object (evaluating 'y.name')
	onSubmit (index.mjs:1791)
	callCallback2 (react-dom_client.js:3674)
	dispatchEvent
	invokeGuardedCallbackDev (react-dom_client.js:3699)
	invokeGuardedCallback (react-dom_client.js:3733)
	invokeGuardedCallbackAndCatchFirstError (react-dom_client.js:3736)
	executeDispatch (react-dom_client.js:7016)
	processDispatchQueueItemsInOrder (react-dom_client.js:7036)
	processDispatchQueue (react-dom_client.js:7045)
	dispatchEventsForPlugins (react-dom_client.js:7053)
	batchedUpdates$1 (react-dom_client.js:18909)
	batchedUpdates (react-dom_client.js:3579)
	dispatchEventForPluginEventSystem (react-dom_client.js:7176)
	dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom_client.js:5478)
	dispatchEvent (react-dom_client.js:5472:93)
	dispatchDiscreteEvent (react-dom_client.js:5449)
	dispatchDiscreteEvent

Relevant configuration

Do not sign into Ory after entering the `ory tunnel` command. Everything else was done as prescribed via the README instructions.

Version

v0.0.1-beta.7

On which operating system are you observing this issue?

macOS

In which environment are you deploying?

Ory Cloud

Additional Context

Please take a look at CanIUse. There you can see that there is a bug with the SubmitEvent API: submitter functionality starting on iOS 15.3.

My coworker found the problematic code resides in the following file:
src/react-components/ory/helpers/user-auth-form.tsx, ~line 83

Thank you

My user reported this problem:

RPReplay_Final1724532537.mov