> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/1.3/whats-new-in-elentra-js-1.3.md).

# What's New in Elentra JS 1.3?

## Overview

Elentra JS 1.3 is an incremental update that adds many quality of life improvements for Elentra JS that have often been requested by members of the Elentra Consortium. 

This update is not intended to bridge the gap between versions 1.2 and the newly released 2.0 (included in Elentra ME 1.16 for purposes of socializing its codebase and concepts). Rather, it is a series of enhancements to some of the more commonly used components in the EJS Component Library, meant to streamline their use and improve the quality of both the user and developer experiences.

## Change Log

### EJS-48: Non-collapsible EjsAlerts can now enable a content area

> Previously, the only way to have a content area for an EjsAlert was to enable the `collapsible` prop by passing `true`. With these changes, the content area will now be shown when an EjsAlert's `content` slot is passed a value, even if the `collapsible` prop is not enabled.

### EJS-50: EjsAlerts now have an optional prop that allows dismissal 

> EjsAlerts now have an additional, optional prop, `dismissible`. When set to `true`, a circular "X" button will appear in the top right of the EjsAlert panel, and it will hide the entire component when clicked. The button is circular and matches the styling of the existing More/Less button that is displayed when `collapsible` is `true`. 

### EJS-93: EjsSwitchToggle now has two optional icon labels

> EjsSwitchToggles now have four optional label props (icon and text labels, one each for both the on and off toggle states). If a true or false icon prop value is provided, it will override the equivalent text label on that toggle, if both have values.

### EJS-98: EjsTooltips now dismiss more reliably

> EjsTooltips had some reliability issues in previous versions of Elentra JS. Clicking on a tooltip itself would trigger parent action click events, and would sometimes be difficult to dismiss even when hovering off of the element that the tooltip was for. Elentra JS 1.3 updates the EjsTooltip component so that when the cursor stops hovering the target element, the tooltip will always disappear, even if the cursor starts hovering over the tooltip itself.

### EJS-39: Fixed Default/Disabled buttons appearing larger in EjsButtonGroups

> Previously, when an EjsButtonGroup was wrapped around multiple EjsButtons, any buttons of type `default` or `disabled` were displaying slightly taller by a couple of pixels. All EjsButtons in a grouping are now the same height, and should align properly.

### EJS-40: EjsButtonGroups in an EjsCard footer no longer have erroneous gaps

> Previously, if an EjsButtonGroup was placed in the footer of an EjsCard, unsightly gaps would appear between the grouped buttons. This update remedies this issue.

### EJS-180: EjsButtonGroups now have an optional prop for a vertical mode

> Passing `true` to the new, optional prop, `vertical`, will create a vertically stacked EjsButtonGroup that is similarly styled.

### EJS-218: Clicking off of an open EjsSelect causes a blur event that hides options

> This is a heavily requested improvement! Previously, clicking outside of an open EjsSelect did not hide or close the window containing the options. Now, when any EjsSelect is open and displaying its options, clicking outside or off of EjsSelect component itself will close / hide the list of options, instead of needing to be manually closed by selecting an option, or by clicking on the same button that opened it. This behaviour can be disabled if needed, by passing `false` to the prop `closeOnBlur`.

### EJS-219: EjsSingleLineInput now causes a blur event to be emitted

> Any EjsSingleLineInput will fire the @blur event which is emitted upwards. This will allow any EjsInput to similarly listen for the child component's @blur event, and respond to it as needed.

### EJS-220: EjsModal now has an optional prop to allow modal close on blur

> Previously, EjsModals had no way to be closed through an @blur event. Now, if `true` is passed to the optional prop, `closeOnBlur`, clicking off of the body of an open modal (anywhere on the dimmer overlay / modal backdrop) will dismiss the modal.

### EJS-221: EjsCards now have an optional "expanded by default" prop

> Previously, if an EjsCard was set to be collapsible (`:contentToggle="true"`), when the component loaded, the content was hidden as EjsCards always rendered in their collapsed state. Now, if a developer wants an EjsCard to be collapsible, but open/expanded by default upon initial load, they can pass `true` to the prop `defaultOpen`.