ui-components icon indicating copy to clipboard operation
ui-components copied to clipboard

Modal: The bottom focus border of form element is cut off

Open vanessatran-ddi opened this issue 1 year ago • 0 comments

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>

image

Acceptance Criteria

  1. The focus border should be fully visible on all form elements inside a modal

vanessatran-ddi avatar Jul 18 '24 21:07 vanessatran-ddi