How to deal with the error the Clipboard API has been blocked because of a permissions policy applied to the current document?

Question

React

I am developing a component for one noCode platform, components are written in React, or React native. The task is very simple - to copy the incoming text to the user's clipboard, but there are only problems with it. Clicking the button throws the following error: Uncaught (in promise) DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document.
Wherever I googled it, it is about all sorts of IFrames, but I don’t even have IFrames in my code. Here is the actual code:

import React, { Component } from 'react'
import { Text, View, StyleSheet, Button } from 'react-native'

class SimpleCopyButton extends Component {

  submitAction = async () => {
    let { input } = this.props

    navigator.clipboard.writeText(input);
    }

  render() {
    const { input,text } = this.props

    return (
      <View style={styles.wrapper} allow="clipboard-write">
        <Button
          onPress = {input && this.submitAction}
          allow="clipboard-write"
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }
})

export default SimpleCopyButton

And what’s interesting is that if I don’t bind a line from the function to a button press, but simply insert it into the code, then there are no problems and the text is copied.
What is the problem?

Answer 1

The Clipboard API is only available on https pages. The clipboard-write permission to write to the clipboard is automatically granted to the page on the active browser tab.