🐛 fix(): bal-<component> hidden after HTMX fragment replacement #1870
Description
Current Behavior
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
- Contact the eADOS team (Le Trong, Hieu or Laukert, Alexander) to obtain test credentials 🗝️
- Open the following link https://ecm-ados-authorisation-portal-test.apps.caast01.balgroupit.com/application-configs/181/edit.
- Click on any row on the table.
- Observe that all input fields in the edit form on the right side disappear.
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.
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>Code of Conduct
- I agree to follow this project's Code of Conduct