Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unnecessary state change occurs when using the open prop #4669

Open
enif-hpcnt opened this issue Apr 8, 2024 · 1 comment
Open

Unnecessary state change occurs when using the open prop #4669

enif-hpcnt opened this issue Apr 8, 2024 · 1 comment

Comments

@enif-hpcnt
Copy link

Is your feature request related to a problem? Please describe.

I'm using the open prop to control the state of the Picker. However, when I change the date in the header and then click outside of the Picker, the date I was selecting gets reset.

This phenomenon can also be observed in the first example on the docs page.

  1. Change the month using prev/next month buttons.
  2. Click outside from the calendar.
Screen.Recording.2024-04-05.at.12.09.26.PM.mov

I discovered this action is caused by the handleClickOutside and setOpen method. I think using the open prop implies using the component in a controlled way; therefore, I believe there should be no need for the internal open state to change.

Describe the solution you'd like

I think the issue could be resolved if the internal open state doesn't change when using the open prop. I want to modify the setOpen method on line 451 of src/index.jsx

  setOpen = (open, skipSetBlur = false) => {
    if(this.props.open !== undefined) {
      return;
    }
    // below is the original code
    this.setState(
      // ...
    )

Additional context
My goal is to use the Mui Select component inside a custom header. Mui Select uses the Mui Modal internally to display the options, and this modal creates a new screen element under the body to show the options. As a result, when selecting an option, the picker closes due to the react-onclickoutside behavior. I attempted to control this using the open prop; however, while trying to change the date, I encountered a situation where the date gets reset as the internal open state changes.

@balajis-qb
Copy link

Hi @enif-hpcnt , In the example you shared, on clicking of the next or previous month button, only the view changes but not the selected date. To select a date, we have to manually click. So only if you noticed in the selected date input, it remains same regardless of the month change and when you click outside the month view is restoring back to the selected date's month.

To understand the issue, are you saying we should not change the month view back to the selected date's month on click outside if we use open prop?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants