Alpine does not react to setRangeText() on input element #4357

docdunning · 2024-08-29T14:58:17Z

docdunning
Aug 29, 2024

I have an input element, and a button that encloses text selected in the input, with three asterisks. It does this using the input's setRangeText() method. The input is bound to an Alpine property foo.

If I type into the input, the bound value is correctly updated and shown in an adjacent paragraph.

If I click the button, the input's value is correctly changed, but the bound value is not.

Is this by design? And if it is, how can I arrange for the bound value to be updated when the input's value changes?

EDIT: I've just found that I can use inp._x_model.set(inp.value); which does update the bound value. Is that the best approach?

Here's a cut-down version of the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{
  foo: '',
}">
<input id="input" type="text" value="abc def ghi" x-model.fill="foo">
<button onclick="addMarkdown()" onmousedown="event.preventDefault()">Bold</button>
<p x-text="foo"></p>
</div>
<script>
function addMarkdown(button, md) {
    const inp = document.getElementById("input");
    const selected = inp.value.slice(inp.selectionStart, inp.selectionEnd);
    inp.setRangeText(`***${selected}***`);
}
</script>
</body>
</html>

Answered by ekwoka

Aug 29, 2024

You can dispatch an input or change event on the input. That would be the best way.

View full answer

ekwoka · 2024-08-29T15:58:02Z

ekwoka
Aug 29, 2024

You can dispatch an input or change event on the input. That would be the best way.

1 reply

docdunning Aug 29, 2024
Author

Thanks, ekwoka.

I've gone with inp.dispatchEvent(new Event("input"));

I tried firing a change event but it doesn't do anything.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alpine does not react to setRangeText() on input element #4357

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Alpine does not react to setRangeText() on input element #4357

docdunning Aug 29, 2024

Replies: 1 comment · 1 reply

ekwoka Aug 29, 2024

docdunning Aug 29, 2024 Author

docdunning
Aug 29, 2024

Replies: 1 comment 1 reply

ekwoka
Aug 29, 2024

docdunning Aug 29, 2024
Author