Refactor: Improve completion handling logic in SearchBarWithAutoCompletion

This commit is contained in:
Nebojsa Vuksic 2025-08-01 12:50:07 +02:00
parent 5b4ff635c4
commit cb6c908769

View File

@ -3,7 +3,10 @@ package org.jetbrains.plugins.template.components
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.HoverInteraction import androidx.compose.foundation.interaction.HoverInteraction
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.text.input.TextFieldState import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.runtime.* import androidx.compose.runtime.*
@ -43,13 +46,20 @@ internal fun <T> SearchBarWithAutoCompletion(
) where T : Searchable, T : PreviewableItem { ) where T : Searchable, T : PreviewableItem {
val focusRequester = remember { FocusRequester() } val focusRequester = remember { FocusRequester() }
val popupController = remember { CompletionPopupController(searchAutoCompletionItemProvider) } val popupController = remember {
CompletionPopupController(searchAutoCompletionItemProvider) { completionItem ->
textFieldState.setTextAndPlaceCursorAtEnd(completionItem.item.label)
onSelectCompletion(completionItem.item)
}
}
val isInputFieldEmpty by remember { derivedStateOf { textFieldState.text.isBlank() } } val isInputFieldEmpty by remember { derivedStateOf { textFieldState.text.isBlank() } }
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
snapshotFlow { textFieldState.text.toString() } snapshotFlow { textFieldState.text.toString() }
.distinctUntilChanged() .distinctUntilChanged()
.collect { searchTerm -> popupController.onQueryChanged(searchTerm) } .collect { searchTerm ->
popupController.onQueryChanged(searchTerm)
}
} }
Box( Box(
@ -62,10 +72,7 @@ internal fun <T> SearchBarWithAutoCompletion(
modifier = Modifier modifier = Modifier
.onSizeChanged { coordinates -> textFieldWidth = coordinates.width } .onSizeChanged { coordinates -> textFieldWidth = coordinates.width }
.fillMaxWidth() .fillMaxWidth()
.handlePopupCompletionKeyEvents(popupController) { item -> .handlePopupCompletionKeyEvents(popupController)
textFieldState.setTextAndPlaceCursorAtEnd(item.label)
onSelectCompletion(item)
}
.focusRequester(focusRequester), .focusRequester(focusRequester),
placeholder = { Text(searchFieldPlaceholder) }, placeholder = { Text(searchFieldPlaceholder) },
leadingIcon = { leadingIcon = {
@ -93,16 +100,15 @@ internal fun <T> SearchBarWithAutoCompletion(
.width(with(LocalDensity.current) { textFieldWidth.toDp() }), .width(with(LocalDensity.current) { textFieldWidth.toDp() }),
popupProperties = PopupProperties(focusable = false), popupProperties = PopupProperties(focusable = false),
) { ) {
popupController.filteredItems.forEach { item -> popupController.completionItems.forEach { completionItem ->
selectableItem( selectableItem(
popupController.isItemSelected(item), completionItem.isSelected,
onClick = { onClick = {
onSelectCompletion(item) popupController.onSelectCompletion()
popupController.onItemAutocompleteConfirmed() textFieldState.setTextAndPlaceCursorAtEnd(completionItem.item.label)
textFieldState.setTextAndPlaceCursorAtEnd(item.label)
}, },
) { ) {
Text(item.label) Text(completionItem.item.label)
} }
} }
} }
@ -137,22 +143,30 @@ internal fun CloseIconButton(onClick: () -> Unit) {
) )
} }
private data class CompletionItem<T : Searchable>(
val item: T,
val isSelected: Boolean,
)
private class CompletionPopupController<T : Searchable>( private class CompletionPopupController<T : Searchable>(
private val itemsProvider: SearchAutoCompletionItemProvider<T>, private val itemsProvider: SearchAutoCompletionItemProvider<T>,
private val onSelectCompletion: (CompletionItem<T>) -> Unit = {},
) { ) {
var selectedItemIndex by mutableIntStateOf(0) private var selectedItemIndex by mutableIntStateOf(-1)
private set
/** /**
* Ensures a popup is not shown when the user autocompletes an item. * Ensures a popup is not shown when the user autocompletes an item.
* Suppresses making popup once onQueryChanged is called after text to TextField is set after autocompletion. * Suppresses making popup once onQueryChanged is called after text to TextField is set after autocompletion.
*/ */
private var skipPopupShowing by mutableStateOf(false) private var skipPopupShowing by mutableStateOf(false)
var filteredItems by mutableStateOf(emptyList<T>())
private set
val selectedItem: T private val _filteredCompletionItems = mutableStateListOf<CompletionItem<T>>()
get() = filteredItems[selectedItemIndex]
val completionItems: List<CompletionItem<T>> get() = _filteredCompletionItems
val selectedItem: CompletionItem<T>
get() = _filteredCompletionItems[selectedItemIndex]
var isVisible by mutableStateOf(false) var isVisible by mutableStateOf(false)
private set private set
@ -177,10 +191,14 @@ private class CompletionPopupController<T : Searchable>(
return return
} }
updateFilteredItems(itemsProvider.provideSearchableItems(searchTerm)) val newItems = itemsProvider.provideSearchableItems(searchTerm)
.map { CompletionItem(it, false) }
updateFilteredItems(newItems)
moveSelectionToFirstItem() moveSelectionToFirstItem()
if (filteredItems.isNotEmpty()) { if (completionItems.isNotEmpty()) {
showPopup() showPopup()
} else { } else {
hidePopup() hidePopup()
@ -196,29 +214,31 @@ private class CompletionPopupController<T : Searchable>(
} }
fun reset() { fun reset() {
moveSelectionToFirstItem()
hidePopup() hidePopup()
moveSelectionToFirstItem()
clearFilteredItems() clearFilteredItems()
} }
fun isItemSelected(item: T): Boolean = (filteredItems[selectedItemIndex] == item) fun onSelectCompletion() {
if (!isVisible) return
fun onItemAutocompleteConfirmed(): T { val completionPopupItem = selectedItem
val selectedItem = this.selectedItem
skipPopupShowing = true skipPopupShowing = true
reset() reset()
return selectedItem onSelectCompletion(completionPopupItem)
} }
private fun updateFilteredItems(filteredItems: List<T>) { private fun updateFilteredItems(newItems: List<CompletionItem<T>>) {
this.filteredItems = filteredItems // TODO Can be done in a more efficient way
clearFilteredItems()
_filteredCompletionItems.addAll(newItems)
} }
private fun clearFilteredItems() { private fun clearFilteredItems() {
filteredItems = emptyList() _filteredCompletionItems.clear()
} }
private fun moveSelectionToFirstItem() { private fun moveSelectionToFirstItem() {
@ -226,25 +246,37 @@ private class CompletionPopupController<T : Searchable>(
} }
private fun moveSelectionTo(index: Int) { private fun moveSelectionTo(index: Int) {
if (index == selectedItemIndex) return
// Deselect previous item
val previousIndex = selectedItemIndex
if (previousIndex in _filteredCompletionItems.indices) {
_filteredCompletionItems[previousIndex] = _filteredCompletionItems[previousIndex].copy(isSelected = false)
}
// Select a new item
if (index in _filteredCompletionItems.indices) {
_filteredCompletionItems[index] = _filteredCompletionItems[index].copy(isSelected = true)
}
selectedItemIndex = index selectedItemIndex = index
} }
private fun normalizeIndex(index: Int) = index.coerceIn(0..filteredItems.lastIndex) private fun normalizeIndex(index: Int) = index.coerceIn(0..completionItems.lastIndex)
} }
/** /**
* Handles navigation keyboard key events for the completion popup. * Handles navigation keyboard key events for the completion popup.
*/ */
private fun <T : Searchable> Modifier.handlePopupCompletionKeyEvents( private fun <T : Searchable> Modifier.handlePopupCompletionKeyEvents(
popupController: CompletionPopupController<T>, popupController: CompletionPopupController<T>
onItemAutocompleteConfirmed: (T) -> Unit = {},
): Modifier { ): Modifier {
return onPreviewKeyEvent { keyEvent -> return onPreviewKeyEvent { keyEvent ->
if (keyEvent.type != KeyEventType.KeyDown) return@onPreviewKeyEvent false if (keyEvent.type != KeyEventType.KeyDown) return@onPreviewKeyEvent false
return@onPreviewKeyEvent when (keyEvent.key) { return@onPreviewKeyEvent when (keyEvent.key) {
Key.Tab, Key.Enter, Key.NumPadEnter -> { Key.Tab, Key.Enter, Key.NumPadEnter -> {
onItemAutocompleteConfirmed(popupController.onItemAutocompleteConfirmed()) popupController.onSelectCompletion()
true true
} }