I’m working on playwright in Java, and try to applied on website that contain hidden select, I tried to set value to it using selectOption but didn’t work.

The error message tell me that, select is hidden so I can’t deal with, I couldn’t deal with this select or remove hidden attribute also!

the reason of hidden is that, the website use react and it show just a div which view select

The content of the part which I work on is:

<div class="form-control ui fluid selection dropdown" tabindex="0" aria-invalid="false">

<select aria-required="true" id="e0op7pe-natId" lang="ar" class="form-control choices__input" type="text" name="data[info][natId]" ref="selectContainer" dir="rtl" hidden="" tabindex="-1" data-choice="active">
</select>
<div class="choices__list choices__list--single">
</div>
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<input type="text" name="search_terms" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" aria-label="false" placeholder="اكتب للبحث">
<div class="choices__list" role="listbox">
<div class="choices__item choices__item--choice has-no-choices">لا توجد خيارات للاختيار من بينها</div>
</div>
</div>

I’ve tried a lot, this is some of what I tried:

1)
ElementHandle natId = page.querySelector("select[name='data[info][natId]']");
       natId.selectOption("194");

2)
page.locator("select[name='data[info][natId]']").selectOption("194");

3)
page.locator("div[class='form-group has-feedback formio-component formio-component-select formio-component-natId  required']").click();

page.locator("select[name='data[info][natId]']").selectOption("194");

4)
page.locator("div[class='form-group has-feedback formio-component formio-component-select formio-component-natId  required']").click();
      
page.evaluate("document.querySelector("select[name='data[info][natId]']").hidden = 'false';");

page.locator("select[name='data[info][natId]']").selectOption("194");

5)
page.locator("div[class='form-group has-feedback formio-component formio-component-select formio-component-natId  required']").click();
      
page.evaluate("document.querySelector("select[name='data[info][natId]']").removeAttribute('Hidden');");
       
page.locator("select[name='data[info][natId]']").selectOption("194");

6)
page.locator("div[class='form-group has-feedback formio-component formio-component-select formio-component-natId  required']").click();
page.evaluate("document.querySelector("select[name='data[info][natId]']").style.display = 'block';");
page.locator("select[name='data[info][natId]']").selectOption("194");

non of these 6 ways has been run successfully or allowed me to set select value.