ui-components
ui-components copied to clipboard
Modal: The bottom focus border of form element is cut off
Info
If you have a form element directly above the actions slot, the bottom focus border doesn't appear.
<goa-button (_click)="onClick()">
Show Modal
</goa-button>
<goa-modal heading="New Item" [open]="isOpen" (_close)="onClose()">
<p>
Your progress will not be saved.
</p>
<goa-dropdown name="someName" value="abc123">
<goa-dropdown-item *ngFor="let fruit of fruits" [value]="fruit.value" [label]="fruit.label" />
</goa-dropdown>
<div slot="actions">
<goa-button-group alignment="end">
<goa-button type="tertiary" (_click)="onClose()">
Cancel
</goa-button>
<goa-button type="primary" (_click)="onClose()">
Exit
</goa-button>
</goa-button-group>
</div>
</goa-modal>
Acceptance Criteria
- The focus border should be fully visible on all form elements inside a modal