This webpage has two dropdown options, which seem to hold the text in innertext/innerHTML. However if you update the innertext it can change the text shown on the webpage but does not really update the field which then causes the rest of the page to load. I was wondering how to update this field. See innertext on line 6.
<div class="av-select is-untouched av-valid css-b62m3t-container" id="orgSelect">
<span id="react-select-2-live-region" class="css-7pg0cj-a11yText"/>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"/>
<div class="organization-select__control css-1nhojdd-control">
<div class="organization-select__value-container organization-select__value-container--has-value css-13y5847">
<div class="organization-select__single-value css-1dc049i-singleValue">Text to Update</div>
<div class="organization-select__input-container css-1azzn7d" data-value="">
<input class="organization-select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="organization" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" aria-errormessage="" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"/>
</div>
<div class="organization-select__indicators css-1wy0on6">
<span class="organization-select__indicator-separator css-1okebmr-indicatorSeparator"/>
<div class="organization-select__indicator organization-select__dropdown-indicator css-fkilnp-indicatorContainer" aria-hidden="true">
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"/>
</svg>
<span class="sr-only">Toggle Select Options</span>
</div>
</div>
</div>
<input name="organization" type="hidden" value="[object Object]"/>
This is one of the things I have tried so far, the other field to update looks exactly the same just has a data-value field included:
var dataContainer = document.getElementsByClassName('payer-select__single-value css-1dc049i-singleValue')[0];
var dataValue = parseInt(dataContainer.getAttribute('data-value'));
dataContainer.setAttribute('data-value', "updated value");
dataContainer.innerHTML = "updated value"