ui.code() can't copy in safari browser

[Wzhipeng]

Description

The ui.code component uses navigator.clipboard.writeText from the copy function, but an error will be reported in the safari browser and cannot be copied.

[falkoschindler]

Thanks for reporting this issue, @Wzhipeng!

As I just learned from ChatGPT:

Modern browsers often require a user-initiated action, like a click or tap, to access the clipboard. Ensure your clipboard writing code is triggered by such an event.

I managed to fix it by writing to the clipboard directly on the client without making the detour over the server. This way Safari recognizes the clipboard access as user-initiated and doesn't raise an error.

[adrastaea]

I managed to fix it by writing to the clipboard directly on the client without making the detour over the server. This way Safari recognizes the clipboard access as user-initiated and doesn't raise an error.

Could you show a code snippet? On Safari, I seem to still be getting Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. with the following code

@ui.page()
async def example_page(client: Client):
    async def copy_url():
        await client.connected()
        await client.run_javascript(f"navigator.clipboard.writeText('{BASE_URL}{app.url_path_for('example_page')}')")
    ui.icon("link").on("click", copy_url)

[rodja]

@adrastaea I think the trick is in this line

nicegui/website/documentation/demo.py

Line 44 in 5ef4130

icon._props['onclick'] = f'navigator.clipboard.writeText(`{full_code}`)' # pylint: disable=protected-access

And it will get nicer in the next release with #2536. It allows registering of javascript code for events with .on.