On the section that is called contains a text box where I've put a class name on the advanced presentation options.
but when running the case and then clicking the button. the text box's class name resets to "leftJustifyStyle".So that makes me unable to manipulate the input of the text box.
How do I make it so that when the modal/overlay shows up. the class name of the text box stay as "manipulate-input"?
Once the control is saved with custom classes, it won't be removed at runtime unless it conflicts with OOTB custom classes.
This is what happens when we add custom class to layout or control :
I have added "custom-class" to the text control from the presentation tab.
Here is the snip of the DOM structure of the text control rendered in our browsers.
The class which we mentioned in the control is added to the First node (red box) of the control, not on the input tag (green box). This is because to provide the custom class with access to all elements of that control.
To can select that input tag, use the following selector:
The above selector will get all input tag elements available inside the custom-class.
Here is the example to get the value of the text control in JS.
val= document.querySelectorAll('.custom-class input').value;
I think you have looked at the class on the input tag. Can you give a try on JS code with the above selector?
I wrote the script on a text file by the way.
It works on the first section but if I do a local action that launches a modal or overlay or submit to go to the next page, the script no longer works.
what I did is add it to the harness while also setting the class name to the advanced presentation options then did this.