DevExtreme dropdowns and Watir - watir

Question

So in upgrading from DevExpress to DevExtreme, DE seems to have gone out of their way to block any automation engine but their own.
Select boxes are build as a layer of custom DIV tags with a read-only input tag in the middle.
When selected, the dropdown list is generated as a DIV list structure tied to the /body/ level of the page source.
This list unloads when the dropdown list closes.
Waitr can see and interact with the list the first time it appears on the page, but once it unloads I cannot get it to find it again.
I have tried Page Object references, native Watir dynamic references, nothing works.
Interestingly I do not get the common 'no longer attached to the DOM' error, just an empty string.
All of the workarounds from DevExpress have been deactivated or blocked.
Has anyone found a way to automate these controls besides exposed JS calls?
Select Box:
<div class="dx-texteditor dx-dropdowneditor-button-visible dx-widget dx-textbox dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="Active_Y_or_N" typeof="drpdown" validations="[{"type":"required"}]" value="1" items="[{"Value":1.0,"Text":"Yes","DropDownType":"Active Y or N"},{"Value":2.0,"Text":"No","DropDownType":"Active Y or N"}]" originalvalue="1">
<div onclick="void(0)" class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<div class="dx-texteditor-container">
<input id="Active_Y_or_N_1" aria-expanded="false" role="combobox" tabindex="0" spellcheck="false" readonly="" aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="dx-texteditor-input" type="text">
<div class="dx-placeholder dx-state-invisible" data-dx_placeholder="Select..."></div>
<div class="dx-texteditor-buttons-container">
<div role="button" onclick="void(0)" class="dx-widget dx-button-normal dx-dropdowneditor-button">
<div class="dx-dropdowneditor-icon"></div>
</div>
</div>
</div>
</div>
List:
<div style="width: 212px; height: 61px; z-index: 1001; margin: 0px; left: 0px; top: 0px; transform: translate(264px, 365px); transition: none 0s ease 0s ; visibility: visible; opacity: 1;" class="dx-overlay-content dx-popup-normal dx-popup-draggable dx-resizable">
<div style="height: 60px;" id="2ceea1a1-35ca-5e1d-72c1-17ca0c70daa9" class="dx-popup-content">
<div aria-activedescendant="3cc4c726-d65a-4248-b16c-6cd8ed666d08" tabindex="-1" role="listbox" class="dx-scrollable dx-scrollview dx-scrollable-customizable-scrollbars dx-scrollable-vertical dx-scrollable-simulated dx-visibility-change-handler dx-list dx-widget dx-collection" id="2779756d-884a-7d65-dd53-5ab194255698">
<div class="dx-scrollable-container">
<div style="transform: translate(0px, 0px);" class="dx-scrollable-content">
<div class="dx-scrollview-top-pocket">
<div style="display: none;" class="dx-scrollview-pull-down">
<div class="dx-scrollview-pull-down-image"></div>
<div class="dx-scrollview-pull-down-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-pull-down-text">
<div style="opacity: 1;">Pull down to refresh...</div>
<div style="opacity: 0;">Release to refresh...</div>
<div style="opacity: 0;">Refreshing...</div>
</div>
</div>
</div>
<div onclick="void(0)" class="dx-scrollview-content">
<div id="3cc4c726-d65a-4248-b16c-6cd8ed666d08" aria-selected="false" role="option" class="dx-item dx-list-item dx-state-focused">
<div class="dx-item-content dx-list-item-content">Yes</div>
</div>
<div aria-selected="false" role="option" class="dx-item dx-list-item">
<div class="dx-item-content dx-list-item-content">No</div>
</div>
</div>
<div class="dx-scrollview-bottom-pocket">
<div style="display: none;" class="dx-scrollview-scrollbottom">
<div class="dx-scrollview-scrollbottom-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content">
</div>
</div>
</div>
</div>
<div class="dx-scrollview-scrollbottom-text">Loading...</div>
</div>
</div>
</div>
<div style="display: none;" class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical dx-scrollbar-hoverable">
<div style="transform: translate(0px, 0px); height: 58px;" class="dx-scrollable-scroll dx-state-invisible">
<div class="dx-scrollable-scroll-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-loadpanel dx-overlay dx-widget dx-visibility-change-handler dx-state-invisible dx-loadpanel">
<div aria-hidden="true" style="width: 222px; height: 90px;" class="dx-overlay-content"></div>
</div>
code (one version anyway):
self.send("#{field}_element").div(:class => 'dx-dropdowneditor-icon').click
drpdwn = #browser.div(:class => 'dx-scrollview-content')
if drpdwn.text.include? value
drpdwn.div(:text => value).click
else
fail "value (#{value}) not found in list (#{self.drop_list_element.text})"
end

Answer 1

It is very hard to answer because I can't see your code and I have no example. So maybe it's a wrong answer. But if your statement:
On the second load of the list, Watir can see it as existing, but not visible.
is correct. Then you can force watir to work with not visible elements using:
browser.hidden(id: "your_element").click
Try it please.