[Masthead]: searchNoRedirect prop still not working properly

[PatrikHysky]

Description

This is a follow-on to issue #8334

searchNoRedirect prop of <Masthead> successfully prevents the redirect. However, it does not emit custom event onSearchNoRedirect correctly.

As per documentation, onSearchNoRedirect event should emit value and method.

1. value is only being emitted onClick. The event emits no value onEnter, resulting in value being undefined.
2. method is not emitted at all. It is always undefined .

As per Masthead documentation, value and method should be emitted both onClick and onEnter.
// disables search redirect onClick and onEnter
document.addEventListener('onSearchNoRedirect', e => console.log(e.detail);
// { suggestion, value: inputValue, method: 'click'|'enter' });

Component(s) impacted

Masthead

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

1.33.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

https://www.redbooks.ibm.com

Package

@carbon/ibmdotcom-react

CodeSandbox example

https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/MastheadL1

Steps to reproduce the issue (if applicable)

1. Use component <Masthead searchNoRedirect />
2. Add custom event listener onSearchNoRedirect , read value and method
3. Load page, type in search keyword
4. Press Enter key. Both value and method return undefined.
5. Click the "search icon." value returns keyword correctly but method returns undefined.

const doSearch = useCallback((e) => {
console.log("value: " + e.detail.value);
console.log("method: " + e.detail.method);
});

React.useEffect(() => {
window.addEventListener("onSearchNoRedirect", doSearch);
return function cleanup() {
window.removeEventListener("onSearchNoRedirect", doSearch);
};
});

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[oliviaflory]

Note: Check if this is happening in Web components as well

[Stefan8412]

i have same issue with masthead component, redirecting is working properly but there is different behaviour when i use click event and enter event. With keyboard navigation and pressing Enter , method , suggestion and value are undefined

[annawen1]

Hi @PatrikHysky is this still an existing issue?

[Stefan8412]

@annawen1 issue still persist on our app/masthead , can i get any feedback please

[ingridsamakova]

@annawen1 @PatrikHysky guys, any update on this one? can you agree with me that this issue is still present?
@annawen1 any ETA when this will be solved if you even consider to fix it?
thanks