bug: IonAert button get empty value from input

[TheSoils]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

IonAlert button handler can not get input value,just empyt string

Expected Behavior

expected get the correct value

Steps to Reproduce

1. add a IonAlert with inputs and buttons
   
2. input and click button
   
3. watch the console result
   

Code Reproduction URL

reproduce

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/wyman/.nvm/versions/node/v16.19.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.7.2

Capacitor:

Capacitor CLI : 5.7.0
@capacitor/android : not installed
@capacitor/core : 5.7.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v16.19.0 (/Users/wyman/.nvm/versions/node/v16.19.0/bin/node)
npm : 9.6.1
OS : macOS Unknown

Additional Information

No response

[ionitron-bot]

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.

[TheSoils]

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

[sean-perkins]

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!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.