Detect click in Compose TextField

Question

I am trying to implement an onClick handler for a Compose TextField. Current functionality is to handle the TextField click but disable manually editing of the field. For my use case I would like to handle the click and do something else. I would like to keep the look and feel of a TextField, and would like the focus animation to also happen.

the readOnly property gives me what I want from a UX perspective, however when I click on the TextField the onClick handler is not called.

TextField(
  value = text,
  onValueChange = { text = it},
  readOnly = true,
  modifier = Modifier
    .clickable(onClick = {
      Log.i("TextField", "Clicked")
    })
)

I have also tried to use pointerInput, how I am having the same problem.

TextField(
  value = text,
  onValueChange = { text = it},
  readOnly = true,
  modifier = Modifier
    .pointerInput(Unit) {
      detectTapGestures(onTap = {
        Log.i("TextField", "Clicked")
      }
    }
)

With Compose being so new its hard to tell if this is a bug or intended.

score 18 · Answer 1 · answered Jun 26 '21 at 07:41

Maybe the better way to detect click events in text field is using interaction source.

step 1 : - Create an interaction source

 val source = remember {
    MutableInteractionSource()
}

step 2: - pass it to text field

 OutlinedTextField(
    value = text,
    readOnly = true,
    onValueChange = {},
    textStyle = MaterialTheme.typography.body1.copy(
        lineHeight = if (isFocused) 25.sp else TextUnit.Unspecified,
        fontWeight = if (isFocused) FontWeight.SemiBold else FontWeight.Normal
    ),
    label = {
        Text(
            text = label,
            fontWeight = if (isFocused) FontWeight.SemiBold else FontWeight.Normal,
            style = MaterialTheme.typography.caption
        )
    },
    interactionSource = source,
    colors = TextFieldDefaults.outlinedTextFieldColors(
        textColor = if (isFocused) MaterialTheme.colors.primary else LocalContentColor.current
    ),
    maxLines = if (isFocused) Int.MAX_VALUE else 2,
    modifier = Modifier
        .padding(
            start = COUNTER_WIDTH + 16.dp,
            top = padding,
            bottom = padding,
            end = 16.dp
        )
        .fillMaxWidth()
        .verticalScroll(enabled = isFocused, state = rememberScrollState())
        .animateContentSize(animationSpec = tween(DURATION))
)

step: 3- collect pressed flow as state and observe changes to it.

 if ( source.collectIsPressedAsState().value)
        onClicked()

IMHO, this seems to be the most accurate answer, without any side-effects or workarounds. — rewgoes, Oct 04 '21 at 15:50
@rewgoes I think there is a side effect https://stackoverflow.com/a/73740797/9107280 — Farrukh Tulkunov, Sep 16 '22 at 06:35
this isn't good, it fires as soon as you tap on the field and don't event remove your finger — user924, Mar 23 '23 at 18:12

Gabriele Mariotti · Answer 2 · 2021-05-11T22:07:26.707

14

Using readOnly = true the TextField is still enabled and the first click gives the focus to the field. You have to perform a double click to handle your onClick function.

Otherwise you can use the enabled property:

   TextField(
        enabled = false,
        modifier = Modifier.clickable(onClick = {/* ... */})
    )

Something like:

TextField(
    value = text,
    onValueChange = { text = it},
    enabled = false,
    modifier = Modifier
        .clickable { text= "Clicked"},
    colors = TextFieldDefaults.textFieldColors(
        disabledTextColor = LocalContentColor.current.copy(LocalContentAlpha.current),
        disabledLabelColor =  MaterialTheme.colors.onSurface.copy(ContentAlpha.medium)
    )
)

edited May 11 '21 at 22:07

answered May 11 '21 at 22:01

Gabriele Mariotti

320,139
94
887
841

So sounds like I just need to figure out a way to revert the Text and Label colors to non-disabled. – lostintranslation May 11 '21 at 22:05
1

@lostintranslation Yes. I've updated the answer with an example reverting the `disabledTextColor` and the `disabledLabelColor` to the default non-disabled colors. – Gabriele Mariotti May 11 '21 at 22:17
Thank you. Out of curiosity, is there a way to attach my own click handler that works when using readOnly? I was trying to go down that route without much success. – lostintranslation May 11 '21 at 22:25
@lostintranslation Sorry but I am able to work with your code only doing a double click in the field. – Gabriele Mariotti May 11 '21 at 22:27

score 7 · Answer 3 · answered Sep 16 '22 at 06:33

To me, it seems the top answer has one major problem.

if ( source.collectIsPressedAsState().value)
    onClicked()

onClicked() will trigger even if press is canceled because you are not waiting to see the end state after the press. When you are scrolling, if your touch is in the same position as the textField, onClick will get triggered and I'm sure that's unwanted interaction 99% of the time.

val pressedState=source.interactions.collectAsState(
      initial = PressInteraction.Cancel(PressInteraction.Press(Offset.Zero)))
       
    if (pressedState.value is PressInteraction.Release)
    {
        dropDownExpanded.value = true
        onClick?.invoke()
        source.tryEmit(PressInteraction.Cancel(PressInteraction.Press(Offset.Zero)))
    }

if you do something like this it eliminates the unwanted onClick while scrolling

What does the `dropDownExpanded.value = true` do? I don't see it anywhere else — radda, Mar 10 '23 at 10:30
@radda it is a state to show the dropdown menu if you have one, in my case, there is one and I pass it to the composable that wraps the whole TextField and the DropDownMenu — Farrukh Tulkunov, Mar 14 '23 at 07:10

score 5 · Answer 4 · answered Mar 23 '23 at 18:33

The correct asnwer would be to use interactions of InteractionSource and not collectIsPressedAsState! The last one just checks when you tap on something but it ignores the fact that you don't even release your finger

TextField(
    value = ...,
    onValueChange = { ... },
    interactionSource = remember { MutableInteractionSource() }
        .also { interactionSource ->
            LaunchedEffect(interactionSource) {
                interactionSource.interactions.collect {
                    if (it is PressInteraction.Release) {
                        // works like onClick
                    }
                }
            }
        }
)

From https://stackoverflow.com/a/70335041/7767664

score 0 · Answer 5 · answered Jun 24 '23 at 19:52

If you want to keep readOnly=true for UX reasons, clickable modifier won't work but this one will :

TextField(
    readOnly = true,
    modifier = Modifier.pointerInput(Unit) {
        awaitEachGesture {
            awaitFirstDown(pass = PointerEventPass.Initial)
            val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
            if (upEvent != null) {
                // YOUR CALLBACK
            }
        }
    }
)

score 0 · Answer 6 · answered Aug 23 '23 at 01:49

For someone who seeks for a simple onclick function without the need of focus animation, I figured out a way that @lostintranslation may have tried. The trick is clear focus in onFocusChanged. This way keeps the TextField enabled-style but with two problems:

no focus animation (other animations work well)
when user want to long press to copy the text, it calls the onclick first.

val focusManager = LocalFocusManager.current

TextField(
        value = ...,
        label = ...,
        readOnly = true,
        modifier = Modifier.onFocusChanged {
                if (it.isFocused) {
                    yourOnClick()
                    // clear focus here
                    focusManager.clearFocus()
          }
    )

Detect click in Compose TextField

6 Answers6