When [execute] the form fields are considered empty

[clun]

Q&A (please complete the following information)

• OS: macOS
• Browser: Brave
• Version: 3.25.1
• Method of installation: import script
• Swagger-UI version: 3.25.1
• Swagger/OpenAPI version: Swagger 2.0

Content & configuration

Swagger/OpenAPI definition:

• https://github.com/awesome-astra/docs/blob/main/docs/pages/develop/api/swagger-api-document.json

Swagger-UI configuration options:

window.ui = SwaggerUIBundle({
    url: "../swagger-api-document.json",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      UrlMutatorPlugin
    ],
    layout: "StandaloneLayout",
    onComplete: () => {
       // custom stuff
    } 
  });
  document.querySelector(".topbar").hidden=true;

Screenshots

How can we help?

To help users populating required fields we implemented a custom hook where fields gets updated in Javascript

// When a user click TRY iT OUT BUTTON we want to fill the form for the user
function hookTryItOutButton() {
  let swaggerOperations = document.querySelectorAll(".try-out__btn");
  for (const swaggerOp of swaggerOperations) {
    swaggerOp.addEventListener("click", function (event) {
      setTimeout(fillSwaggerForm, 100);
    });
  }
}

function fillSwaggerForm() {
  let inputFields = document.querySelectorAll("input[type=text]");
  for (const inputField of inputFields) {
    if (
      inputField.hasAttribute("placeholder") &&
      inputField.getAttribute("placeholder").startsWith("X-Cassandra-Token")
    ) {
      inputField.value = document.getElementById("astra_token").value;
      inputField.style.color = "#008800";
      inputField.style.backgroundColor = "#eeffee";
      inputField.style.border = "1px solid #008800";
      inputField.dispatchEvent(new Event("change"));
      inputField.dispatchEvent(new Event("onchange"));
    } else if (
      inputField.hasAttribute("placeholder") &&
      inputField.getAttribute("placeholder").startsWith("namespace-id")
    ) {
      inputField.value = document.getElementById("astra_namespace").value;
      inputField.style.color = "#008800";
      inputField.style.backgroundColor = "#eeffee";
      inputField.style.border = "1px solid #008800";
      inputField.dispatchEvent(new Event("change"));
      inputField.dispatchEvent(new Event("onchange"));
    }
  }
}

The fields are populated as expected (cf screenshots). Unfortunately when in click the button EXECUTE everything happen as the fields were not populated (input field shake and values back to placeholder.

Is there any event I can trigger on the input field for the form to consider them populated ? We tried Input, Keyspress as well.

[mathis-m]

I think this is because react does not react to the change event. Can you try to dispatch the input event like shown below:

After some research of react source code, I got a hack method for react 16:

let input = someInput; 
let lastValue = input.value;
input.value = 'new value';
let event = new Event('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16 内部定义了descriptor拦截value，此处重置状态
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue);
}
input.dispatchEvent(event);

NOTICE: JUST A HACK

Originally posted by @whosesmile in facebook/react#11488 (comment)

[clun]

It worked perfectly, thank you for this !