Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#247] FIX: Do not preselect any option in Listbox with floating label #248

Merged
merged 5 commits into from
Oct 12, 2023
+14 −12
Merged

[#247] FIX: Do not preselect any option in Listbox with floating label #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0c37164
Do not preselect an option
isaturina Sep 13, 2023
ef3e559
update test
isaturina Sep 13, 2023
8801d26
Merge branch 'main' into noPreselectedOption
renka Sep 21, 2023
cc05413
Merge branch 'main' into noPreselectedOption
darkwebdev Oct 6, 2023
21e8ced
Merge branch 'main' into noPreselectedOption
darkwebdev Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ exports[`Storyshots ebay-listbox-button Floating label 1`] = `
<button
aria-expanded={false}
aria-haspopup="listbox"
className="btn btn--form btn--floating-label"
className="btn btn--form"
onClick={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
Expand All @@ -290,11 +290,6 @@ exports[`Storyshots ebay-listbox-button Floating label 1`] = `
>
Select
</span>
<span
className="btn__text"
>
Option 1
</span>
<svg
aria-hidden={true}
className="icon icon--chevron-down-16"
Expand All @@ -310,7 +305,7 @@ exports[`Storyshots ebay-listbox-button Floating label 1`] = `
<select
className="listbox-button__native"
hidden={true}
value="AA"
value=""
>
<option
value="AA"
Expand Down
17 changes: 12 additions & 5 deletions src/ebay-listbox-button/listbox-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
}
const getInitialSelectedOption = (): { option: any, index: number } => {
const selectedIndex = listBoxButtonOptions.findIndex(({ props }) => props.value === value)
const index = selectedIndex > -1 ? selectedIndex : 0
const index = selectedIndex > -1 || floatingLabel ? selectedIndex : 0
return {
option: listBoxButtonOptions[index],
index
Expand Down Expand Up @@ -223,7 +223,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
.map((child, index) => cloneElement(child, {
index,
key: index,
selected: child.props.value === selectedOption.props.value,
selected: selectedOption && child.props.value === selectedOption.props.value,
onClick: (e, optionValue) => onOptionsSelect(e, optionValue, index),
innerRef: optionNode => !optionNode
? optionsByIndexRef.current.delete(index)
Expand All @@ -232,7 +232,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
const wrapperClassName = classNames('listbox-button', className, { 'listbox-button--fluid': fluid })
const buttonClassName = classNames('btn btn--form', {
'btn--borderless': borderless,
'btn--floating-label': floatingLabel
'btn--floating-label': floatingLabel && selectedOption
})
const expandBtnTextId = prefixId && 'expand-btn-text'

Expand All @@ -257,7 +257,10 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
{floatingLabel}
</span>
) : null}
<span className="btn__text" id={expandBtnTextId}>{selectedOption.props.children}</span>
{selectedOption &&
<span className="btn__text" id={expandBtnTextId}>
{selectedOption.props.children}
</span>}
<EbayIcon name="chevronDown16" />
</span>
</button>
Expand Down Expand Up @@ -286,7 +289,11 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
{updatelistBoxButtonOptions}
</div>
</div>}
<select hidden className="listbox-button__native" name={name} value={selectedOption.props.value}>
<select
hidden
className="listbox-button__native"
name={name}
value={selectedOption ? selectedOption?.props.value : ''}>
{
updatelistBoxButtonOptions.map((option, i) =>
<option value={option.props.value} key={i} />)
Expand Down
Loading