Skip to content

Commit 60a562e

Browse files
noisysocksnoisysocks
authored
NTP: Set target to 'new-tab' and 'new-window' properly when submitting Omnibar (#1824)
* Set target to 'new-tab' and 'new-window' properly when submitting searches and chats * Simplify omnibar tests to use only cmd (Meta) key modifiers
1 parent 2e637c0 commit 60a562e

File tree

3 files changed

+112
-3
lines changed

3 files changed

+112
-3
lines changed

‎special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@ export function AiChatForm({ chat, setChat }) {
4848
}
4949
};
5050

51+
/** @type {(event: MouseEvent) => void} */
52+
const handleClickSubmit = (event) => {
53+
event.preventDefault();
54+
if (disabled) return;
55+
event.stopPropagation();
56+
submitChat({
57+
chat,
58+
target: eventToTarget(event, platformName),
59+
});
60+
};
61+
5162
/** @type {(event: import('preact').JSX.TargetedEvent<HTMLTextAreaElement>) => void} */
5263
const onChange = (event) => {
5364
const form = formRef.current;
@@ -85,6 +96,8 @@ export function AiChatForm({ chat, setChat }) {
8596
class={styles.submitButton}
8697
aria-label={t('aiChatForm_submitButtonLabel')}
8798
disabled={chat.length === 0}
99+
onClick={handleClickSubmit}
100+
onAuxClick={handleClickSubmit}
88101
>
89102
<ArrowRightIcon />
90103
</button>

‎special-pages/pages/new-tab/app/omnibar/components/useSuggestions.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ function reducer(state, action) {
121121
* @param {(term: string) => void} props.setTerm
122122
*/
123123
export function useSuggestions({ term, setTerm }) {
124-
const { onSuggestions, getSuggestions, openSuggestion } = useContext(OmnibarContext);
124+
const { onSuggestions, getSuggestions, openSuggestion, submitSearch } = useContext(OmnibarContext);
125125
const platformName = usePlatformName();
126126
const [state, dispatch] = useReducer(reducer, initialState);
127127

@@ -220,9 +220,11 @@ export function useSuggestions({ term, setTerm }) {
220220
dispatch({ type: 'hideSuggestions' });
221221
break;
222222
case 'Enter':
223+
event.preventDefault();
223224
if (selectedSuggestion) {
224-
event.preventDefault();
225225
openSuggestion({ suggestion: selectedSuggestion, target: eventToTarget(event, platformName) });
226+
} else {
227+
submitSearch({ term, target: eventToTarget(event, platformName) });
226228
}
227229
break;
228230
}

‎special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,41 @@ test.describe('omnibar widget', () => {
2929
});
3030
});
3131

32-
test('AI chat form submission via button click', async ({ page }, workerInfo) => {
32+
test('search form submission with shift+enter submits to new-window', async ({ page }, workerInfo) => {
33+
const ntp = NewtabPage.create(page, workerInfo);
34+
const omnibar = new OmnibarPage(ntp);
35+
36+
await ntp.reducedMotion();
37+
await ntp.openPage({ additional: { omnibar: true } });
38+
await omnibar.ready();
39+
40+
await omnibar.searchInput().fill('pizza');
41+
await omnibar.searchInput().press('Shift+Enter');
42+
43+
await omnibar.expectMethodCalledWith('omnibar_submitSearch', {
44+
term: 'pizza',
45+
target: 'new-window',
46+
});
47+
});
48+
49+
test('search form submission with cmd+enter submits to new-tab', async ({ page }, workerInfo) => {
50+
const ntp = NewtabPage.create(page, workerInfo);
51+
const omnibar = new OmnibarPage(ntp);
52+
53+
await ntp.reducedMotion();
54+
await ntp.openPage({ additional: { omnibar: true } });
55+
await omnibar.ready();
56+
57+
await omnibar.searchInput().fill('pizza');
58+
await omnibar.searchInput().press('Meta+Enter');
59+
60+
await omnibar.expectMethodCalledWith('omnibar_submitSearch', {
61+
term: 'pizza',
62+
target: 'new-tab',
63+
});
64+
});
65+
66+
test('AI chat submit button', async ({ page }, workerInfo) => {
3367
const ntp = NewtabPage.create(page, workerInfo);
3468
const omnibar = new OmnibarPage(ntp);
3569
await ntp.reducedMotion();
@@ -49,6 +83,46 @@ test.describe('omnibar widget', () => {
4983
});
5084
});
5185

86+
test('AI chat submit button with shift+click submits to new-window', async ({ page }, workerInfo) => {
87+
const ntp = NewtabPage.create(page, workerInfo);
88+
const omnibar = new OmnibarPage(ntp);
89+
await ntp.reducedMotion();
90+
91+
await ntp.openPage({ additional: { omnibar: true } });
92+
await omnibar.ready();
93+
94+
await omnibar.aiTab().click();
95+
await omnibar.expectMode('ai');
96+
97+
await omnibar.chatInput().fill('pizza');
98+
await omnibar.chatSubmitButton().click({ modifiers: ['Shift'] });
99+
100+
await omnibar.expectMethodCalledWith('omnibar_submitChat', {
101+
chat: 'pizza',
102+
target: 'new-window',
103+
});
104+
});
105+
106+
test('AI chat submit button with cmd+click submits to new-tab', async ({ page }, workerInfo) => {
107+
const ntp = NewtabPage.create(page, workerInfo);
108+
const omnibar = new OmnibarPage(ntp);
109+
await ntp.reducedMotion();
110+
111+
await ntp.openPage({ additional: { omnibar: true } });
112+
await omnibar.ready();
113+
114+
await omnibar.aiTab().click();
115+
await omnibar.expectMode('ai');
116+
117+
await omnibar.chatInput().fill('pizza');
118+
await omnibar.chatSubmitButton().click({ modifiers: ['Meta'] });
119+
120+
await omnibar.expectMethodCalledWith('omnibar_submitChat', {
121+
chat: 'pizza',
122+
target: 'new-tab',
123+
});
124+
});
125+
52126
test('AI chat keyboard behavior', async ({ page }, workerInfo) => {
53127
const ntp = NewtabPage.create(page, workerInfo);
54128
const omnibar = new OmnibarPage(ntp);
@@ -80,6 +154,26 @@ test.describe('omnibar widget', () => {
80154
});
81155
});
82156

157+
test('AI chat sumission with cmd+enter submits to new-tab', async ({ page }, workerInfo) => {
158+
const ntp = NewtabPage.create(page, workerInfo);
159+
const omnibar = new OmnibarPage(ntp);
160+
await ntp.reducedMotion();
161+
162+
await ntp.openPage({ additional: { omnibar: true } });
163+
await omnibar.ready();
164+
165+
await omnibar.aiTab().click();
166+
await omnibar.expectMode('ai');
167+
168+
await omnibar.chatInput().fill('pizza');
169+
await omnibar.chatInput().press('Meta+Enter');
170+
171+
await omnibar.expectMethodCalledWith('omnibar_submitChat', {
172+
chat: 'pizza',
173+
target: 'new-tab',
174+
});
175+
});
176+
83177
test('mode switching preserves query state', async ({ page }, workerInfo) => {
84178
const ntp = NewtabPage.create(page, workerInfo);
85179
const omnibar = new OmnibarPage(ntp);

0 commit comments

Comments
 (0)