Skip to content

Commit

Permalink
feat: Alt-click to edit inputselect items (#21032)
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjackwhite
benjackwhite authored Mar 20, 2024
1 parent a241764 commit 305d9ba
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 44 deletions.
Binary file modified ..._snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 16 additions & 1 deletion frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,24 @@ MultipleSelect.args = {

export const MultipleSelectWithCustom: Story = Template.bind({})
MultipleSelectWithCustom.args = {
placeholder: 'Enter any email...',
placeholder: 'Pick a url...',
mode: 'multiple',
allowCustomValues: true,
options: [
{
key: 'http://posthog.com/docs',
label: 'http://posthog.com/docs',
},
{
key: 'http://posthog.com/pricing',
label: 'http://posthog.com/pricing',
},

{
key: 'http://posthog.com/products',
label: 'http://posthog.com/products',
},
],
}

export const Disabled: Story = Template.bind({})
Expand Down
128 changes: 85 additions & 43 deletions frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Tooltip } from '@posthog/lemon-ui'
import { useKeyHeld } from 'lib/hooks/useKeyHeld'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
import { range } from 'lib/utils'
Expand Down Expand Up @@ -49,16 +51,21 @@ export function LemonInputSelect({
const inputRef = useRef<HTMLInputElement>(null)
const [selectedIndex, setSelectedIndex] = useState(0)
const values = value ?? []
const altKeyHeld = useKeyHeld('Alt')

const separateOnComma = allowCustomValues && mode === 'multiple'

const visibleOptions = useMemo(() => {
const res: LemonInputSelectOption[] = []
const customValues = [...values]

// We show the input value if custom values are allowed and it's not in the list
if (allowCustomValues && inputValue && !values.includes(inputValue)) {
customValues.unshift(inputValue)
}

options.forEach((option) => {
// Remove from the custom values list if it's in the options

if (customValues.includes(option.key)) {
customValues.splice(customValues.indexOf(option.key), 1)
}
Expand All @@ -77,14 +84,8 @@ export function LemonInputSelect({
res.unshift({ key: value, label: value })
})
}

// Finally we show the input value if custom values are allowed and it's not in the list
if (allowCustomValues && inputValue && !values.includes(inputValue)) {
res.unshift({ key: inputValue, label: inputValue })
}

return res
}, [options, inputValue, value])
}, [options, inputValue, values])

// Reset the selected index when the visible options change
useEffect(() => {
Expand All @@ -111,29 +112,50 @@ export function LemonInputSelect({
onInputChange?.(inputValue)
}

const _onActionItem = (item: string): void => {
const _removeItem = (item: string): void => {
let newValues = [...values]
if (values.includes(item)) {
// Remove the item
if (mode === 'single') {
newValues = []
} else {
newValues.splice(values.indexOf(item), 1)
}
// Remove the item
if (mode === 'single') {
newValues = []
} else {
// Add the item
if (mode === 'single') {
newValues = [item]
} else {
newValues.splice(values.indexOf(item), 1)
}

onChange?.(newValues)
}

const _addItem = (item: string): void => {
let newValues = [...values]
// Add the item
if (mode === 'single') {
newValues = [item]
} else {
if (!newValues.includes(item)) {
newValues.push(item)
}

setInputValue('')
}

setInputValue('')
onChange?.(newValues)
}

const _onActionItem = (item: string): void => {
if (altKeyHeld && allowCustomValues) {
// In this case we want to remove it if added and set input to it
if (values.includes(item)) {
_removeItem(item)
}
setInputValue(item)
return
}

if (values.includes(item)) {
_removeItem(item)
} else {
_addItem(item)
}
}

const _onBlur = (): void => {
// We need to add a delay as a click could be in the popover or the input wrapper which refocuses
setTimeout(() => {
Expand All @@ -160,8 +182,8 @@ export function LemonInputSelect({
const _onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.key === 'Enter') {
e.preventDefault()

const itemToAdd = visibleOptions[selectedIndex]?.key

if (itemToAdd) {
_onActionItem(visibleOptions[selectedIndex]?.key)
}
Expand All @@ -181,33 +203,51 @@ export function LemonInputSelect({
}
}

// TRICKY: We don't want the popover to affect the snack buttons
const prefix = (
<PopoverReferenceContext.Provider value={null}>
<>
{values.map((value) => {
const option = options.find((option) => option.key === value) ?? {
label: value,
labelComponent: null,
}
return (
<>
<LemonSnack title={option?.label} onClose={() => _onActionItem(value)}>
const prefix = useMemo(
() => (
// TRICKY: We don't want the popover to affect the snack buttons
<PopoverReferenceContext.Provider value={null}>
<>
{values.map((value) => {
const option = options.find((option) => option.key === value) ?? {
label: value,
labelComponent: null,
}
const snack = (
<LemonSnack
title={option?.label}
onClose={() => _onActionItem(value)}
onClick={allowCustomValues ? () => _onActionItem(value) : undefined}
>
{option?.labelComponent ?? option?.label}
</LemonSnack>
</>
)
})}
</>
</PopoverReferenceContext.Provider>
)
return allowCustomValues ? (
<Tooltip
title={
<>
<KeyboardShortcut option /> + click to edit
</>
}
>
{snack}
</Tooltip>
) : (
snack
)
})}
</>
</PopoverReferenceContext.Provider>
),
[values, options, altKeyHeld, allowCustomValues]
)

return (
<LemonDropdown
closeOnClickInside={false}
visible={showPopover}
sameWidth
closeOnClickInside={false}
actionable
visible={showPopover}
onClickOutside={() => {
popoverFocusRef.current = false
setShowPopover(false)
Expand Down Expand Up @@ -236,7 +276,9 @@ export function LemonInputSelect({
{isHighlighted ? (
<span>
<KeyboardShortcut enter />{' '}
{!values.includes(option.key)
{altKeyHeld && allowCustomValues
? 'edit'
: !values.includes(option.key)
? mode === 'single'
? 'select'
: 'add'
Expand Down

0 comments on commit 305d9ba

Please sign in to comment.