Topic: Linear Stepper causes next page animation to replay if onChange prop is present.

EthanPB priority asked 1 month ago


Expected behavior When updating a state in form element, the next step animation should not replay.

Actual behavior When form elements (select, Datepicker, radio, etc) are updating states in onChange when the state is declared in the same component as the parent MDBStepper (not MDBStepperStep), the next step animation replays on the second time a state is updated on that step. It can be any 2 states, even if they are different. The only thing that does not cause this behaviour is MDBInput and MDBTextArea. This also does not occur on the first step.

Resources (screenshots, code snippets etc.) This seems to be some weird bug with validation and the onChange event. This only seems to happen when both are specified. I don't have a live example as I am currently developing in a Vite dev environment.

Example Code:

const [dateState, setDateState] = useState();
<MDBStepper linear onChange={(number) => {setSteps(number)}}>
    <MDBStepperForm>
        <MDBStepperStep itemId={1}>
            <p>Some arbitrary elements</p>
        </MDBStepperStep>
        <MDBStepperStep itemId={2}>
            <MDBDatepicker onChange={(_value, date) => {
                    if (date.getTime() !== dateState.getTime()) {
                        setDateState(date)
                    }
                }} />
        </MDBStepperStep>
    </MDBStepperForm>
</MDBStepper>

Mateusz Lazaru staff answered 1 month ago


I'll add a task to fix it. Thanks for reporting.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 8.0.0
  • Device: MacBook Pro 16 Inch M2 Max
  • Browser: Safari 14.4
  • OS: macOS Sonoma 14.4
  • Provided sample code: No
  • Provided link: No