Hi
Karthikeyan V,
Thank you for your reply.
Well, it is not what I am looking for. I will explain clearly again and hopefully you get my point this time. :)
Scenario:
Step 1: Click "Open Modal" on main page
Step 2. It will pop up dialog with 4 tabs on main page that consists of many components like textfield, dropdownlist, checkbox, multiselect.
Step 3. Whenever I click each tab for the first time -- all components look fine.
Step 4. I click Cancel button that will dismiss the modal -- return back to main page
Step 5. Repeat from no 1 to 4 again which is 2nd time so the pop up dialog (1st tab) -- components look fine.
Step 6. I click 2nd/3rd/4th tab and the components disappear -- not working properly.
I discovered some bugs when I look at the development tool. At Step 4, when I click cancel button that will dismiss the modal, it will make a copy of div id (Refer to Problem_1.jpg) automatically. Then I continue to click Open modal again, the first tab looks ok but not the second, third and 4th tab. I click cancel again then it will make another copy of div id (Refer to Problem_2.jpg).
I tried to remove these "duplicate div IDs" on development tool and played around with it. It works perfectly that surprised me. I guess the problem is unmount component where I need to call DOM element to remove the child div but I cannot find the solution.
Example code like:
public componentWillUnmount() {
const node = ReactDOM.findDOMNode(this).parentNode as HTMLDivElement;
console.log("findDOMNode - " + node);
// ReactDOM.unmountComponentAtNode(document.getElementById("VertragEditForm_Zahlung"));
ReactDOM.unmountComponentAtNode(node);
// ReactDOM.unmountComponentAtNode(this.props.containerId);
// ReactDOM.unmountComponentAtNode(document.getElementById('Root'));
// ReactDOM.unmountComponentAtNode(document.getElementById('newRoot'));
}
Attachment:
Problem_9b727ca6.zip
