diff --git a/change/@ni-nimble-components-b0a59426-c9a2-444a-a9f7-1ccf79dd94b4.json b/change/@ni-nimble-components-b0a59426-c9a2-444a-a9f7-1ccf79dd94b4.json new file mode 100644 index 0000000000..89b87e9753 --- /dev/null +++ b/change/@ni-nimble-components-b0a59426-c9a2-444a-a9f7-1ccf79dd94b4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fixes keyboard closing when rich-text editor toolbar buttons are clicked in mobile iOS browsers", + "packageName": "@ni/nimble-components", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/rich-text/editor/styles.ts b/packages/nimble-components/src/rich-text/editor/styles.ts index 0b316c445c..dc71f5f4f6 100644 --- a/packages/nimble-components/src/rich-text/editor/styles.ts +++ b/packages/nimble-components/src/rich-text/editor/styles.ts @@ -251,16 +251,6 @@ export const styles = css` gap: ${standardPadding}; place-items: center; } - ${ - /** - * Restricting the pointer-events for the slot="start" where the icon is rendered. - * This can be removed after the below issue is fixed. - * https://github.com/ni/nimble/issues/1422 - */ '' - } - nimble-toggle-button::part(start) { - pointer-events: none; - } :host([error-visible]) .error-icon { display: none; diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts index 8d700b4491..081236b7f7 100644 --- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts +++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts @@ -96,12 +96,6 @@ export class RichTextEditorPageObject { await waitForUpdatesAsync(); } - public async clickFooterIconSlot(button: ToolbarButton): Promise { - const icon = this.getIconSlot(button); - icon!.click(); - await waitForUpdatesAsync(); - } - public getButtonCheckedState(button: ToolbarButton): boolean { const toggleButton = this.getFormattingButton(button); return toggleButton!.checked; @@ -273,11 +267,4 @@ export class RichTextEditorPageObject { private getEditorLastChildElement(): Element { return getLastChildElement(this.getTiptapEditor() as HTMLElement)!; } - - private getIconSlot( - button: ToolbarButton - ): HTMLSpanElement | null | undefined { - const toggleButton = this.getFormattingButton(button); - return toggleButton?.shadowRoot?.querySelector('.start'); - } } diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts index db2472e34e..54bee01563 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts @@ -208,28 +208,6 @@ describe('RichTextEditor', () => { } }); - describe('clicking icon slots should update the tab index of the button', () => { - const focused: string[] = []; - const disabled: string[] = []; - - for (const value of formattingButtons) { - const specType = getSpecTypeByNamedList(value, focused, disabled); - specType( - `"${value.name}" button icon click check`, - // eslint-disable-next-line @typescript-eslint/no-loop-func - async () => { - await pageObject.clickFooterIconSlot( - value.toolbarButtonIndex - ); - - expect( - pageObject.getButtonTabIndex(value.toolbarButtonIndex) - ).toBe(0); - } - ); - } - }); - describe('space key press should update the checked state of the buttons', () => { const focused: string[] = []; const disabled: string[] = [];