Dialog component misfires onHide function

[vdamrongsri]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Steps to reproduce
Go to: https://codesandbox.io/s/50v0m27wol

1. Click Show
2. Click either Yes, No, or the close icon.
3. Check console, notice how onHide() is called twice, instead of once.

Current behavior
onHide method fires whenever modal visible property is changed.

Expected behavior
onHide should only fire when close icon is selected.

• React version:
  react ^16.8.4

• PrimeReact version:
  This only started to occur in primereact^3.1.3, I even reverted the version back to primereact^3.1.2 and the bug was resolved.

Browsers
Chrome Version 74.0.3729.131 (Official Build) (64-bit)
Brave Version 0.63.48 Chromium: 74.0.3729.108 (Official Build) (64-bit)

• Language: ["typescript": "3.3.3333"]

[zxhhh11]

Have you found a solution ? I have the same problem , I also reverted the version back to primereact^3.1.2 but the bug was still unresolved

[TonisPiip]

I haven't encountered this as I avoid the use of the visible prop as even if visible is false the dialog is rendered. So if the visible prop should be false just don't render the dialog.

Problem with this solution is you loose the nice CSS transition when opening the dialog.

[TonisPiip]

Seems that is a side effect of #854
I'm seeing a way that will stop the dialog from calling it twice you click the close button that's rendered by Dialog; simply by setting some flag via setTimeout, to act as a de-bouce, so it's only called once.
But if you first call the onHide method from outside the dialog, like in the footer buttons, then the dialog doesn't know that it's been called and should call it again, as you might has some special logic in the onhide method and be closing it just by changing the state.

Proposed solution for first problem.

onClose(event) { // called only when clicking the close button in the header.
        this.props.onHide();
        this.onHideCalled = true;
        setTimeout( () => this.onHideCalled = false, 20) 
        event.preventDefault();
    }

    hide() {
        this.unbindMaskClickListener();
        this.unbindGlobalListeners();
        
        !this.onHideCalled && this.props.onHide();

        if (this.props.modal) {
            this.disableModality();
        }

        if (this.state.maximized) {
            DomHandler.removeClass(document.body, 'p-overflow-hidden');
        }
    }

Or the other solution would be to make your onHide method rate-limited, with some sort of wrapper like this:

const rateLimit = (fn, time) => {
  let called = false;
  const functionCall = () => {
      if (called) return
      called = true;
      fn.apply(this, arguments);
      setTimeout(()=>(called=false),time)
    };
  return functionCall
  }

Working example

[mertsincan]

This is an expected behavior. Before the Dialog is closed, most users want to have a callback like onHide to use for different purposes.

On your issue, you need to check this.state.visible to do setState or another thing;

onHide = () => {
    if (this.state.visible) {
      this.setState({ visible: false });
      console.log("HIT onHide()");
    }
};