Power up Datetime Popup

Trello
1

I try to open a datetime popup but nothing happens. (confirmation popup and iframe popup open normally)

  handleClick = (e: React.MouseEvent) => {
    TrelloPowerUp.iframe().popup({
      mouseEvent: e.nativeEvent,
      type: 'date',
      title: 'Title',
      callback: function(t: any, opts: any) {
        //
      },
    })
  }
2

Hi, Ivan

Could you provide more information? How is handleClick being called? Are there any console errors?

Also, I noticed you’re not following the typical pattern of allowing t to be passed in the handler function. You can see some examples of the pattern in the documentation: Popup

3

Hi Jireh,

I use TrelloPowerUp.iframe() because this code is hosted in iframe. (Client Library)

This is a root React component on card-back-section iframe

class App extends React.Component {
  handleOpenConfirmPopup = (event: React.MouseEvent) => {
    TrelloPowerUp.iframe().popup({
      mouseEvent: event.nativeEvent,
      type: 'confirm',
      title: 'Title',
      message: 'Message',
      confirmText: 'Confirm',
      onConfirm: (t, opts) => {
        console.log('onConfirm')
      },
    })
  }

  handleOpenDatePopup = (event: React.MouseEvent) => {
    TrelloPowerUp.iframe().popup({
      mouseEvent: event.nativeEvent,
      type: 'date',
      title: 'Title',
      callback: function (t: any, opts: any) {
        console.log('callback')
      },
    })
  }

  render() {
    return (
      <>
        <button type={'button'} onClick={this.handleOpenConfirmPopup}>Open Confirm Popup</button>
        <button type={'button'} onClick={this.handleOpenDatePopup}>Open Date Popup</button>
      </>
    )
  }
}

and this is pure iframe html code

<!DOCTYPE html>
<html lang="en">
<script id="trello-power-up" src="https://p.trellocdn.com/power-up.min.js" crossorigin="anonymous"></script>
<body>

<button type="button" id="confirm">Open Confirm Popup</button>
<button type="button" id="date">Open Date Popup</button>

<script>
  document.getElementById('confirm').addEventListener('click', (event) => {
    TrelloPowerUp.iframe().popup({
      mouseEvent: event,
      type: 'confirm',
      title: 'Title',
      message: 'Message',
      confirmText: 'Confirm',
      onConfirm: (t, opts) => {
        console.log('onConfirm')
      },
    })
  })

  document.getElementById('date').addEventListener('click', (event) => {
    TrelloPowerUp.iframe().popup({
      mouseEvent: event.nativeEvent,
      type: 'date',
      title: 'Title',
      callback: function (t, opts) {
        console.log('callback')
      },
    })
  })
</script>

</body>
</html>

When I click on Open Confirm Popup a popover is displayed but when I click on Open Date Popup nothing happens, and there are no errors in the console.