How to edit input text to TextField when open the ...

# compose-desktop

[姜尚]

How to edit input text to TextField when open the Popup
I want create a Selector that can filter item by text for input

Code In Thread 👉🏾
Issue https://github.com/JetBrains/compose-jb/issues/2810

[Dominaezzz]

Please move your code into this thread so people can look at it.

[姜尚]

@Dominaezzz Ok, Thank you for you notice

package ...

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.awt.awtEventOrNull
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.focus.FocusDirection
import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.InputMode
import androidx.compose.ui.input.InputModeManager
import androidx.compose.ui.input.key.*
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalInputModeManager
import androidx.compose.ui.unit.*
import androidx.compose.ui.window.Popup
import androidx.compose.ui.window.PopupPositionProvider
import com.sun.helper.common.Log
import com.sun.helper.component.TimePickerForm
import java.awt.event.KeyEvent
import java.time.LocalTime


internal val androidx.compose.ui.input.key.KeyEvent.isDirectionUp: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_UP

internal val androidx.compose.ui.input.key.KeyEvent.isDirectionDown: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_DOWN

internal val androidx.compose.ui.input.key.KeyEvent.isDirectionRight: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_RIGHT

internal val androidx.compose.ui.input.key.KeyEvent.isDirectionLeft: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_LEFT

internal val androidx.compose.ui.input.key.KeyEvent.isHome: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_HOME

internal val androidx.compose.ui.input.key.KeyEvent.isMoveEnd: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_END

internal val androidx.compose.ui.input.key.KeyEvent.isPgUp: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_PAGE_UP

internal val androidx.compose.ui.input.key.KeyEvent.isPgDn: Boolean
    get() = key.nativeKeyCode == KeyEvent.VK_PAGE_DOWN

@ExperimentalComposeUiApi
private fun preHandlePopupOnKeyEvent(
    keyEvent: androidx.compose.ui.input.key.KeyEvent
): Boolean {
    return if (keyEvent.type == KeyEventType.KeyDown && keyEvent.awtEventOrNull?.keyCode == KeyEvent.VK_ESCAPE)
        true
    else if (keyEvent.type == KeyEventType.KeyDown)
        when {
            keyEvent.isDirectionDown -> true

            keyEvent.isDirectionUp -> true

            else -> false
        }
    else false
}


@ExperimentalComposeUiApi
private fun handlePopupOnKeyEvent(
    keyEvent: androidx.compose.ui.input.key.KeyEvent,
    onDismissRequest: () -> Unit,
    focusManager: FocusManager,
    inputModeManager: InputModeManager
): Boolean {
    return if (keyEvent.type == KeyEventType.KeyDown && keyEvent.awtEventOrNull?.keyCode == KeyEvent.VK_ESCAPE) {
        onDismissRequest()
        true
    } else if (keyEvent.type == KeyEventType.KeyDown) {
        when {
            keyEvent.isDirectionDown -> {
                inputModeManager.requestInputMode(InputMode.Keyboard)
                focusManager.moveFocus(FocusDirection.Next)
                true
            }

            keyEvent.isDirectionUp -> {
                inputModeManager.requestInputMode(InputMode.Keyboard)
                focusManager.moveFocus(FocusDirection.Previous)
                true
            }

            else -> false
        }
    } else {
        false
    }
}

@ExperimentalComposeUiApi
@Composable
fun ComponentShow() {
    Column {
        var text by remember { mutableStateOf("") }
        var isExpand by remember { mutableStateOf(false) }
        val focusManagerCurrent = LocalFocusManager.current
        OutlinedTextField(
            text,
            onValueChange = { text = it },
            placeholder = { Text("What") },
            modifier = Modifier.onFocusChanged {
                isExpand = it.isFocused
                Log.log("ComponentShow", "it.isFocused ${it.isFocused}")
            }.onKeyEvent {
                Log.log("ComponentShow", "OutlinedTextField -- onKeyEvent", it.toString())
                false
            })
        if (isExpand) {
            var focusManager: FocusManager? by mutableStateOf(null)
            var inputModeManager: InputModeManager? by mutableStateOf(null)
            val onDismissRequest: () -> Unit = { isExpand = false; focusManagerCurrent.clearFocus() }
            Popup(popupPositionProvider = object : PopupPositionProvider {
                override fun calculatePosition(
                    anchorBounds: IntRect,
                    windowSize: IntSize,
                    layoutDirection: LayoutDirection,
                    popupContentSize: IntSize
                ): IntOffset = IntOffset(anchorBounds.left, anchorBounds.bottom + 10)
            }, onDismissRequest = onDismissRequest, focusable = true, onPreviewKeyEvent = {
                Log.log("ComponentShow", "onPreviewKeyEvent", it.toString())
                preHandlePopupOnKeyEvent(it)
            }, onKeyEvent = {
                val r = handlePopupOnKeyEvent(
                    it, onDismissRequest, focusManager!!, inputModeManager!!
                )
                Log.log("ComponentShow", "onKeyEvent", it.toString(), r)
                r
            }) {
                focusManager = LocalFocusManager.current
                inputModeManager = LocalInputModeManager.current
                Box(Modifier.size(250.dp).background(Color.White).shadow(4.dp, RoundedCornerShape(15))) {

                }
            }
        }
    }
}

[Dima Avdeev]

Hello, I made sample for your case:
https://github.com/dima-avdeev-jb/help-text-field-autocompletion

[andylamax]

Thanks a lot. Your sample has helped me today