Copy to Clipboard Not Working

Antony · September 12, 2024, 6:48pm

Wappler Version : 6.8.0
Operating System : Windows 11
Server Model: N/A
Database Type:N/A
Hosting Type: N/A
dmxBrowser.js version:

/*!
 App Connect Browser
 Version: 3.0.0
 (c) 2024 Wappler.io
 @build 2024-04-15 17:48:46
 */

Expected behavior

What do you think should happen?

When I use the browser copy to clipboard function, the supplied text content should be copied to the clipboard.

Actual behavior

What actually happens?

It isn't copied to the clipboard and there is the following message in the console:

parser.js:729 Error calling method  in expression: browser1.writeTextToClipboard('Hello World!') TypeError: Cannot read properties of undefined (reading 'writeText')
    at s.writeTextToClipboard (browser.js:143:1)
    at e.<anonymous> (BaseComponent.js:470:1)
    at parser.js:727:1
    at parser.js:469:1
    at Object.parse (parser.js:404:1)
    at HTMLButtonElement.<anonymous> (on.js:14:1)
    at HTMLButtonElement.a (events.js:280:1)
    at HTMLButtonElement.dispatch (jquery-3.4.1.min.js:2:42571)
    at HTMLButtonElement.<anonymous> (jquery-3.4.1.min.js:2:40572)

How to reproduce

Use this example:

<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/4/sandstone/bootstrap.min.css" />
    <link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
</head>

<body is="dmx-app" id="z_copy">
    <div is="dmx-browser" id="browser1">
        <button id="btn1" class="btn" dmx-on:click="browser1.writeTextToClipboard('Hello World!')">Button</button>
    </div>
    <script src="bootstrap/4/js/popper.min.js"></script>
    <script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>

Apple · September 13, 2024, 1:59am

Any functionality that breaks is a bug, moved to bug reports

AC2 bug?

Antony · September 16, 2024, 4:24pm

@teodor, could you process this bug report for me please?

(I've just updated it to be in proper bug report format).

It seems to be the only thing right now that isn't working as I transition to 6.8.0!

Teodor · September 16, 2024, 4:31pm

Works perfectly fine for me in the latest Wappler version.
Maybe check if app connect and the browser component are the latest versions.

Also, your button should not be nested inside the browser component:

<div is="dmx-browser" id="browser1">
   <button id="btn1" class="btn" dmx-on:click="browser1.writeTextToClipboard('Hello World!')">Button</button>
</div>

not that this causes the issue, but it is just not correct.

Antony · September 16, 2024, 4:42pm

Thanks for looking so quickly @teodor!

So I've just run the Project Updater and it tells me all the files are up to date (see below).

Is there something else to check?

= = = = = = = = = = = = = = = = =

The dmxAppConnect.js file header is this:

/*!
 App Connect
 Version: 2.0.13
 (c) 2024 Wappler.io
 @build 2024-07-15 11:46:43
 */

The dmxBrowser.js version is this:

/*!
 App Connect Browser
 Version: 3.0.0
 (c) 2024 Wappler.io
 @build 2024-04-15 17:48:46
 */

updater

brad · September 16, 2024, 4:54pm

Not sure, Antony. Have you tried fixing your code as Teodor suggested. I can't replicate the issue either. Perhaps:

1: All the required files are not published to your target
2: Something local on your computer preventing it

Try this link and see if it works for you.

Teodor · September 16, 2024, 5:44pm

What browser are you using on what OS? Is your site served over http:// or https:// ?

Antony · September 16, 2024, 6:56pm

Hi @teodor...

The issue is the same locally using http://localhost/ on WAMP and on my server based test site.

The server is currently http rather than https.

Could being https make a difference do you think?

I'm using Chrome on Windows 11.

I was using other browser commands to do the copy and paste in 3.9.7:

browser1.selectAll();
browser1.copy();

These worked just fine on localhost using Chrome, but also now don't work in my 6.8.0 upgraded version... I don't know if they have been depreciated or not, but I assumed they had and so went on to use .writeTextToClipboard(), only to find that doesn't work either.

Antony · September 16, 2024, 7:00pm

Yes, that works okay.

I am PHP rather than node though... should that make a difference?

Hyperbytes · September 16, 2024, 7:03pm

doubt it as App connect is native .js regardless of platform

brad · September 16, 2024, 7:03pm

Shouldn't make a difference. I use it on internal PHP sites and it works just fine. To me it seems like your files are not being published to your target. What are you using for a staging/development target? Can you make sure all the files are there? Do a full publish.

Antony · September 18, 2024, 7:37pm

Hi again @teodor...

I've created a new project with just an index file that contains the button and the brower components, and it still doesn't work... I feel like I have tried all I can do.

I will DM you a zip file of the complete project... can you load up the project and tell me what is wrong with it please?

Thanks!
Antony.

Teodor · September 18, 2024, 8:09pm

Everything works fine with the files you sent me.
Are you sure you've cleared your browser cache and you don't have any old file cached?
Tested both on mac and windows in Chrome and works fine on both places.

Antony · September 18, 2024, 8:26pm

Thank you for looking at it so quickly @teodor!

I've done what you said and I still have the problem...

I've cleared the cache on Chrome and on Firefox, and I've put ?x=123 on the end of each call to the .js files to force them to be re-read (as shown below), and the error still occurs on both browsers.

Here is the console message:

Can that message help you or Patrick to know what is happening?

This is soooo strange!

Best wishes,
Antony.

<script src="dmxAppConnect/dmxAppConnect.js?x=123"></script>
...
<script src="dmxAppConnect/dmxBrowser/dmxBrowser.js?x=123" defer></script>

brad · September 18, 2024, 8:41pm

Are you sure you aren't running some sort of app (Anti-Virus or Security) in the background that might be blocking it? Have you tried a different device? Seems to me this is 'possibly' an isolated issue rather than a Wappler issue.

Cheese · September 18, 2024, 9:34pm

I was going to ask a similar question to Brad's. Maybe a browser extension is interfering? Have you tried running in Incognito Mode @Antony?

Antony · September 19, 2024, 12:32pm

Hi there @teodor, @Cheese , @brad ...

Thanks for your thoughts on helping me out with this! I've tried different laptops, browsers I never use, incognito, and it still doesn't work for me...

I have uploaded that little page with the button to my new test server... could you each please tell me if it works for you from there?

http://new.workshop-angel.com/z_copy.php

Thanks!
Antony.

<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/4/sandstone/bootstrap.min.css" />
    <link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
</head>

<body id="z_copy" is="dmx-app">
    <div is="dmx-browser" id="browser1">

    </div>
    <button id="btn1" class="btn" dmx-on:click="browser1.writeTextToClipboard('Hello World!')">Button</button>
    <script src="bootstrap/4/js/popper.min.js"></script>
    <script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>

Cheese · September 19, 2024, 12:37pm

On click I receive the following error in the console:

parser.js:729 Error calling method  in expression: browser1.writeTextToClipboard('Hello World!') TypeError: Cannot read properties of undefined (reading 'writeText')
    at s.writeTextToClipboard (browser.js:143:1)
    at Object.keys.forEach.data.<computed> (BaseComponent.js:470:1)
    at parser.js:727:1
    at parser.js:469:1
    at dmx.parse (parser.js:404:1)
    at HTMLButtonElement.<anonymous> (on.js:14:1)
    at HTMLButtonElement.a (events.js:280:1)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2:41964)
    at v.handle (jquery-3.3.1.slim.min.js:2:39983)
(anonymous)	@	parser.js:729
(anonymous)	@	parser.js:469
dmx.parse	@	parser.js:404
(anonymous)	@	on.js:14
a	@	events.js:280
dispatch	@	jquery-3.3.1.slim.min.js:2
v.handle	@	jquery-3.3.1.slim.min.js:2

Teodor · September 19, 2024, 12:38pm

Please read the notification on the top of this page:

In other words, if your website is served over HTTP, the writeText() method will not work.

Antony · September 19, 2024, 12:38pm

Yes, that is what I see...