bug: IonAert button get empty value from input about ionic-framework HOT 3 CLOSED

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

from ionic-framework.

i found that the setInterval make value empty,here is test repository
test-ion-alert

from ionic-framework.

Hello @TheSoils thanks for this issue. This is an implementation issue, not an issue with the ion-alert component.

Every 100ms, you are forcing a complete re-render of the view and the alert. This resets the value of all the form controls in the alert. This can best be seen if you render a radio button. The selected radio button will be immediately de-selected.

I would recommend separating the render responsibility for your countdown to a separate component:

import { useEffect, useState } from "react";

const CountDown = () => {
  const [time, setTime] = useState<Date>(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 100);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return time?.toTimeString();
};

export default CountDown;

and render that component in place of doing the setInterval at the page level component.

Thanks!

from ionic-framework.