Clicking on a row in the table causes all input fields in the edit form (located on the right side) to disappear.
When a table row is clicked, the edit form on the right side should remain visible and update to show the data of the selected record.
What I found is that the DOM still contains the correct HTML structure, but the elements become hidden due to CSS visibility rules.
bal-accordion, bal-accordion-details, bal-accordion-summary, bal-accordion-trigger, bal-app, bal-badge, bal-button, bal-button-group, bal-card, bal-card-actions, bal-card-button, bal-card-content, bal-card-subtitle, bal-card-title, bal-carousel, bal-carousel-item, bal-check, bal-checkbox, bal-checkbox-group, bal-close, bal-content, bal-data, bal-data-item, bal-data-label, bal-data-value, bal-date, bal-date-calendar, bal-date-calendar-cell, bal-divider, bal-dropdown, bal-field, bal-field-control, bal-field-hint, bal-field-label, bal-field-message, bal-file-upload, bal-footer, bal-form, bal-form-col, bal-form-grid, bal-heading, bal-hint, bal-hint-text, bal-hint-title, bal-icon, bal-input, bal-input-date, bal-input-group, bal-input-slider, bal-input-stepper, bal-label, bal-list, bal-list-item, bal-list-item-accordion-body, bal-list-item-accordion-head, bal-list-item-content, bal-list-item-icon, bal-list-item-subtitle, bal-list-item-title, bal-logo, bal-modal, bal-modal-body, bal-modal-header, bal-nav, bal-nav-link, bal-nav-link-grid, bal-nav-link-grid-col, bal-nav-link-group, bal-nav-menu-bar, bal-nav-menu-flyout, bal-nav-meta-bar, bal-navbar, bal-navbar-brand, bal-navbar-menu, bal-navbar-menu-end, bal-navbar-menu-start, bal-notices, bal-notification, bal-number-input, bal-option, bal-option-list, bal-pagination, bal-popover, bal-popover-content, bal-popup, bal-progress-bar, bal-radio, bal-radio-group, bal-radio-icon, bal-segment, bal-segment-item, bal-select, bal-select-option, bal-shape, bal-sheet, bal-snackbar, bal-spinner, bal-stack, bal-stage, bal-stage-back-link, bal-stage-body, bal-stage-foot, bal-stage-head, bal-stage-image, bal-step-item, bal-steps, bal-switch, bal-tab-item, bal-table, bal-tabs, bal-tag, bal-tag-group, bal-text, bal-textarea, bal-time-input, bal-toast, bal-tooltip {
visibility: hidden;
}<div id="detailForm" class="col is-one-third">
<bal-card color="yellow" class="bal-card bal-card--is-yellow hydrated">
<!---->
<bal-card-title class="bal-card-title hydrated">
<!---->
<bal-heading class="bal-heading bal-heading--space-none bal-heading--level-h3 hydrated">
<!---->
<h3 class="bal-heading__text bal-heading__text--color-undefined bal-heading__text--size-x-large" data-testid="bal-heading">Edit Application Config</h3>
</bal-heading>
</bal-card-title>
<bal-card-content id="applicationConfigForm">
<!---->
<form action="/application-configs/181" hx-boost="true" hx-select="#applicationConfigIndex" hx-target="#applicationConfigIndex" hx-swap="outerHTML transition:true" method="post" onsubmit="this.querySelector('[type=submit]').disabled = true">
<input type="hidden" name="_csrf" value="L0-vDO9hiGUdosYVnQE_RaOwTonvJVePWfRUt6xrb4H8XUbUHSzOOIxVsQcwmvAs_iwLfJWEY-uKF2GiacAxh5tfWuOaZSW3">
<bal-field id="applicationNameInput" invalid="false">
<!---->
<bal-field-label class="sc-bal-field-label-h bal-field-label hydrated">
<!---->
<bal-label class="sc-bal-field-label bal-label hydrated">
<!----><label id="bal-field-4-lbl" class="bal-label__native bal-label__native--multiline bal-label__native--small sc-bal-field-label-s" for="bal-field-4-ctrl">Application Name *</label>
</bal-label>
</bal-field-label>
<bal-field-control class="sc-bal-field-control-h bal-field-control control sc-bal-field-control-s hydrated">
<!---->
<bal-input name="applicationName" type="text" placeholder="e.g. Dummy Client Application" value="Nghia App" required="" max-length="255" aria-disabled="false" class="bal-input hydrated">
<input class="input bal-focusable" data-testid="bal-input" id="bal-field-4-ctrl" aria-invalid="false" aria-disabled="false" autocapitalize="off" autocomplete="off" autocorrect="off" maxlength="255" name="applicationName" placeholder="e.g. Dummy Client Application" required="" spellcheck="false" type="text" aria-labelledby="bal-field-4-lbl">
</bal-input>
</bal-field-control>
<span class="bal-field-hidden"></span>
</bal-field>
<bal-field id="entitlementInput" invalid="false">
<!---->
<bal-field-label class="sc-bal-field-label-h bal-field-label hydrated">
<!---->
<bal-label class="sc-bal-field-label bal-label hydrated">
<!----><label id="bal-field-5-lbl" class="bal-label__native bal-label__native--multiline bal-label__native--small sc-bal-field-label-s" for="bal-field-5-ctrl">AD Entitlement *</label>
</bal-label>
</bal-field-label>
<bal-field-control class="sc-bal-field-control-h bal-field-control control sc-bal-field-control-s hydrated">
<!---->
<bal-input name="entitlement" type="text" placeholder="e.g. ECM-DM-ClientApp-ECM-Dummy" value="ECM-DM-ClientApp-Nghia" required="" max-length="51" aria-disabled="false" class="bal-input hydrated">
<input class="input bal-focusable" data-testid="bal-input" id="bal-field-5-ctrl" aria-invalid="false" aria-disabled="false" autocapitalize="off" autocomplete="off" autocorrect="off" maxlength="51" name="entitlement" placeholder="e.g. ECM-DM-ClientApp-ECM-Dummy" required="" spellcheck="false" type="text" aria-labelledby="bal-field-5-lbl">
</bal-input>
</bal-field-control>
<span class="bal-field-hidden"></span>
</bal-field>
<bal-field id="sourceSystemNameInput" invalid="false">
<!---->
<bal-field-label class="sc-bal-field-label-h bal-field-label hydrated">
<!---->
<bal-label class="sc-bal-field-label bal-label hydrated">
<!----><label id="bal-field-6-lbl" class="bal-label__native bal-label__native--multiline bal-label__native--small sc-bal-field-label-s" for="bal-field-6-ctrl">Source System Name *</label>
</bal-label>
</bal-field-label>
<bal-field-control class="sc-bal-field-control-h bal-field-control control sc-bal-field-control-s hydrated">
<!---->
<bal-input name="sourceSystemName" type="text" placeholder="e.g. DUMMY_CLIENT_APPLICATION" value="NGHIA" required="" max-length="255" aria-disabled="false" class="bal-input hydrated">
<input class="input bal-focusable" data-testid="bal-input" id="bal-field-6-ctrl" aria-invalid="false" aria-disabled="false" autocapitalize="off" autocomplete="off" autocorrect="off" maxlength="255" name="sourceSystemName" placeholder="e.g. DUMMY_CLIENT_APPLICATION" required="" spellcheck="false" type="text" aria-labelledby="bal-field-6-lbl">
</bal-input>
</bal-field-control>
<span class="bal-field-hidden"></span>
</bal-field>
<bal-field id="senderAppIdInput" invalid="false">
<!---->
<bal-field-label class="sc-bal-field-label-h bal-field-label hydrated">
<!---->
<bal-label class="sc-bal-field-label bal-label hydrated">
<!----><label id="bal-field-7-lbl" class="bal-label__native bal-label__native--multiline bal-label__native--small sc-bal-field-label-s" for="bal-field-7-ctrl">Sender App ID *</label>
</bal-label>
</bal-field-label>
<bal-field-control class="sc-bal-field-control-h bal-field-control control sc-bal-field-control-s hydrated">
<!---->
<bal-input name="senderAppId" type="number" placeholder="e.g. 910" value="1234" required="" max="2147483647" aria-disabled="false" class="bal-input hydrated">
<input class="input bal-focusable" data-testid="bal-input" id="bal-field-7-ctrl" aria-invalid="false" aria-disabled="false" autocapitalize="off" autocomplete="off" autocorrect="off" max="2147483647" name="senderAppId" placeholder="e.g. 910" required="" spellcheck="false" type="number" aria-labelledby="bal-field-7-lbl">
</bal-input>
</bal-field-control>
<span class="bal-field-hidden"></span>
</bal-field>
<bal-button-group position="right" class="bal-button-group bal-button-group--position-right bal-button-group--direction-auto hydrated">
<!---->
<div class="field is-grouped has-direction-auto">
<button id="saveButton" class="button is-primary" type="submit">Save</button>
</div>
</bal-button-group>
</form>
</bal-card-content>
</bal-card>
</div>
Current Behavior
🎥 Reproduce Video
Clicking on a row in the table causes all input fields in the edit form (located on the right side) to disappear.
Expected Behavior
When a table row is clicked, the edit form on the right side should remain visible and update to show the data of the selected record.
Steps to Reproduce
Version
19.8.3
Browsers
No response
Device
No response
Code Reproduction URL
No response
Additional Information
What I found is that the DOM still contains the correct HTML structure, but the elements become hidden due to CSS visibility rules.
Code of Conduct