The PopUp does not work in the first time

[Nguyendev037]

When we used click button for the open pop up screen, all the logic code does not work. But at the second time the code work perfectly.

[Normaltic]

Thank you for reporting the issue.

Unfortunately, when I tried to reproduce the problem, the following code works fine:

If it doesn't works on first click, and works on second click, I guess it caused by button.

Please check open method works well on other location or way:

useEffect( () => {
  setTimeout( () => open({ ... }), 1000 );
}, [open]);

[Nguyendev037]

The setTimeout function work fine with the app. We still don't know why we used the async await function. the app work wrong at the first time. However from the second time, the popup work perfectly

[Normaltic]

I thought it caused by awaiting open method finished When I try to reproduce the problem. But it doesn't. And I still can't reproduce this problem.

setTimeout code means check open method is works well other way like using setTimeout. If code works fine, Popup is opened after mounted, after 1 sec.

As a aside, current open method is not resolve promise. Awaiting open method will blocks executing follow codes. If there is no other reason, I suggest remove async-await.(Also I think I should fix to open method is resolve promise after popup opened.)

Try to add console.log('called') code before calling open method inside of handleClick.

If 'called' message is not shown when first click, it may problem of button(like event, focus, ...).

If 'called' message is shown when first click, I can guess it caused by library(like during appending Daum postcode script, ... ).

[Nguyendev037]

The problem is appear when I used the popup function due to Google Chrome policy, but with the Embedded, the code work perfectly. So I change my code into the modal UI and used the Embedded version

[Normaltic]

Ok, if using 'embed' is ok and works well for you, please use it that way.

Chrome popup policy issues was not occured until now. This is first case, I will take a look.

If you give a some more information( chrome version environment, ... ), it maybe help to resolving this issue.

thanks.

[Nguyendev037]

I have just tested, the error is also happened at the first time, with embedded version. We put that into a model which is from Mui. At the first time, it's reload the whole page and also clear all the previous data, although they was stored in redux.

[Nguyendev037]

I have created a new reactjs project just for test the function. In here I just created a button, when clicking on it, the DaumPostCodeEmbed will appear.

At the first time of code, the page was reload a whole page. I think that is the main error

[Normaltic]

Oh... these problems are facing the first time. I also tried to create new project with cra-js(because I used cra-typescript at first time.) for testing. This is my result:

2024-11-12.12.46.05.mov

I also can't reproduce added problems. 😢 I think I need a little more time.

I have just tested, the error is also happened at the first time, with embedded version. We put that into a model which is from Mui. At the first time, it's reload the whole page and also clear all the previous data, although they was stored in redux.

In the past, Similar phenomenon is occurred in #52, but it didn't reloading page. It is related to autoClose option is true and Daum Postcode Embed tag is positioned component root element.

Other case is #45, This issue used 'Model', but it also didn't reloading page. It was caused by racing of Daum Postcode script.

At the first time of code, the page was reload a whole page. I think that is the main error

I attachmented my result, It works fine without reload in my env.

So, I suggest to try to resolve problem with some way.

I suggest following opinion:

1. (You may have already tried it) You can check 'Daum Postcode( This is Service provider. react-daum-postcode is only wrapper of 'Daum Postcode'. )''s examples in guide page work well. If it is works well, we can guess close up that cause is library or your env.
2. You also can check try to reproduce with code playground( jsfiddle, codesandbox, ... ). It is useful that judge without your environment.
3. From reported in DaumPostcode를 렌더링 하면 오류가 뜹니다 #45, you can solve adding script yourself on your project before mount DaumPostcodeEmbed. I might knew it is already resolved, But if it works, I will check logic of appending script.
4. About 팝업창에서 검색 후 결과를 클릭해도 반응이 없습니다. daumPostcode/QnA#596, you can check this case your project.

I will try these:

1. I try to reproduce your phenomenon( Popup and embed with refreshing ).
2. I will discuss your case to 'Daum Postcode' about these phenomenon.

If you want to use Daum postcode service immediately, Uncomfortably, you can also implement yourself with refer to Daum postcode guide and my repository.

I'm sorry to your uncomfortable, Thank you to appreciate your collaborating.