fix(modal): shouldSubmitOnEnter should also dispatch "click:button--primary" (#1007)

* fix(modal): shouldSubmitOnEnter should also dispatch "click:button--primary"

Fixes #1005

* yarn build:lib
This commit is contained in:
Eric Liu 2022-01-14 08:51:48 -10:00 committed by GitHub
commit 49a94b0ee4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 25 deletions

View file

@ -2277,7 +2277,7 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
| size | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- | Set the size of the modal |
@ -2292,7 +2292,7 @@ None.
| hasScrollingContent | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
| primaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the primary button to be triggered when pressing "Enter" |
| shouldSubmitOnEnter | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
| secondaryButtonText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |

View file

@ -6041,7 +6041,7 @@
{
"name": "shouldSubmitOnEnter",
"kind": "let",
"description": "Set to `true` for the primary button to be triggered when pressing \"Enter\"",
"description": "Set to `true` for the \"submit\" and \"click:button--primary\" events\nto be dispatched when pressing \"Enter\"",
"type": "boolean",
"value": "true",
"isFunction": false,

View file

@ -55,7 +55,10 @@
/** Set to `true` to disable the primary button */
export let primaryButtonDisabled = false;
/** Set to `true` for the primary button to be triggered when pressing "Enter" */
/**
* Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter"
*/
export let shouldSubmitOnEnter = true;
/** Specify the secondary button text */
@ -174,6 +177,7 @@
e.preventDefault();
} else if (shouldSubmitOnEnter && e.key === 'Enter') {
dispatch('submit');
dispatch('click:button--primary');
}
}
}}"

View file

@ -78,7 +78,8 @@ export interface ModalProps
primaryButtonDisabled?: boolean;
/**
* Set to `true` for the primary button to be triggered when pressing "Enter"
* Set to `true` for the "submit" and "click:button--primary" events
* to be dispatched when pressing "Enter"
* @default true
*/
shouldSubmitOnEnter?: boolean;