Patternfly-react: Select group label not required, but without label it breaks the UI

[karelhala]

Describe the issue. What is the expected and unexpected behavior?

When using select with SelectGroup the label is marked as optional, yet if I don't pass it it breaks the whole UI with error message Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Remove label in PF examples and it breaks the component.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Rather critical bug, we can't properly upgrade to new PF because of this bug.

What is your product and what release version are you targeting?
cloud.redhat.com

[karelhala]

ping @tlabaj @redallen

[karelhala]

The bug is caused by this https://github.com/patternfly/patternfly-react/blob/master/packages/react-core/src/components/Select/SelectMenu.tsx#L64 Is there any reasonable reason why changing the groupLabel? If I'd send + as group label this would have been changed - I was searching trough the codebase and it looks like the property titleId is not used anywhere. Might be a leftover and could be removed.

[redallen]

It's used in SelectGroup.tsx:

<div className={css(styles.selectMenuGroupTitle)} id={titleId} aria-hidden>

I'm unfamiliar with how SelectGroup works. We should make the prop required or change the code to group.props.label && group.props.label.replace(/\W/g, '-'),.

cc @kmcfaul

[kmcfaul]

+1 adding the null check

Making it required would be breaking, and I'm not sure it needs to be required. It definitely needs to not break when left out though

[karelhala]

@kmcfaul thank you for the fix!