mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
fix: added pre-check for decimal deletion
This commit is contained in:
parent
adc7baed63
commit
5596120191
1 changed files with 63 additions and 7 deletions
|
@ -18,6 +18,8 @@
|
||||||
*/
|
*/
|
||||||
export let value = null;
|
export let value = null;
|
||||||
|
|
||||||
|
let previousValue = null;
|
||||||
|
|
||||||
/** Specify the step increment */
|
/** Specify the step increment */
|
||||||
export let step = 1;
|
export let step = 1;
|
||||||
|
|
||||||
|
@ -99,12 +101,12 @@
|
||||||
/** Obtain a reference to the input HTML element */
|
/** Obtain a reference to the input HTML element */
|
||||||
export let ref = null;
|
export let ref = null;
|
||||||
|
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher, tick } from "svelte";
|
||||||
import Add from "../icons/Add.svelte";
|
import Add from "carbon-components-svelte/src/icons/Add.svelte";
|
||||||
import Subtract from "../icons/Subtract.svelte";
|
import Subtract from "carbon-components-svelte/src/icons/Subtract.svelte";
|
||||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
import WarningFilled from "carbon-components-svelte/src/icons/WarningFilled.svelte";
|
||||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
import WarningAltFilled from "carbon-components-svelte/src/icons/WarningAltFilled.svelte";
|
||||||
import EditOff from "../icons/EditOff.svelte";
|
import EditOff from "carbon-components-svelte/src/icons/EditOff.svelte";
|
||||||
|
|
||||||
const defaultTranslations = {
|
const defaultTranslations = {
|
||||||
[translationIds.increment]: "Increment number",
|
[translationIds.increment]: "Increment number",
|
||||||
|
@ -119,6 +121,8 @@
|
||||||
} else {
|
} else {
|
||||||
ref.stepDown();
|
ref.stepDown();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
previousValue = ref.value;
|
||||||
value = +ref.value;
|
value = +ref.value;
|
||||||
|
|
||||||
dispatch("input", value);
|
dispatch("input", value);
|
||||||
|
@ -137,16 +141,67 @@
|
||||||
$$props["aria-label"] ||
|
$$props["aria-label"] ||
|
||||||
"Numeric input field with increment and decrement buttons";
|
"Numeric input field with increment and decrement buttons";
|
||||||
|
|
||||||
|
//$: value && !!changeCaretPosition;
|
||||||
|
|
||||||
function parse(raw) {
|
function parse(raw) {
|
||||||
return raw != "" ? Number(raw) : null;
|
return raw != "" ? Number(raw) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInput({ target }) {
|
function updatePreviousValue() {
|
||||||
|
previousValue = parse(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onInput({ target, inputType, data }) {
|
||||||
|
const possibleNewValue = parse(target.value);
|
||||||
value = parse(target.value);
|
value = parse(target.value);
|
||||||
|
|
||||||
|
const isIntegerTransition =
|
||||||
|
!data &&
|
||||||
|
!Number.isInteger(previousValue) &&
|
||||||
|
Number.isInteger(possibleNewValue);
|
||||||
|
|
||||||
|
if (isIntegerTransition && value < previousValue) {
|
||||||
|
await setSelectionAfterTick(target.value.length);
|
||||||
|
} else if (isIntegerTransition && previousValue && value > previousValue) {
|
||||||
|
let parts = previousValue.toString().split(".");
|
||||||
|
|
||||||
|
if (inputType === "deleteContentForward" && parts[1]) {
|
||||||
|
parts[1] = parts[1].substring(1);
|
||||||
|
} else if (inputType === "deleteContentBackward") {
|
||||||
|
parts[0] = parts[0].slice(0, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const chars =
|
||||||
|
parts[0].length + (inputType === "deleteContentBackward" ? 1 : 0);
|
||||||
|
value = parse(parts.join("."));
|
||||||
|
await setSelectionAfterTick(chars);
|
||||||
|
} else if (
|
||||||
|
!isIntegerTransition &&
|
||||||
|
previousValue &&
|
||||||
|
value === previousValue &&
|
||||||
|
inputType === "deleteContentForward"
|
||||||
|
) {
|
||||||
|
value = parse(0);
|
||||||
|
await setSelectionAfterTick(0);
|
||||||
|
} else {
|
||||||
|
value = possibleNewValue;
|
||||||
|
}
|
||||||
|
|
||||||
dispatch("input", value);
|
dispatch("input", value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setSelection(position) {
|
||||||
|
ref.focus();
|
||||||
|
ref.type = "text";
|
||||||
|
ref.setSelectionRange(position, position);
|
||||||
|
ref.type = "number";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setSelectionAfterTick(position) {
|
||||||
|
await tick();
|
||||||
|
setSelection(position);
|
||||||
|
}
|
||||||
|
|
||||||
function onChange({ target }) {
|
function onChange({ target }) {
|
||||||
dispatch("change", parse(target.value));
|
dispatch("change", parse(target.value));
|
||||||
}
|
}
|
||||||
|
@ -201,6 +256,7 @@
|
||||||
max="{max}"
|
max="{max}"
|
||||||
min="{min}"
|
min="{min}"
|
||||||
step="{step}"
|
step="{step}"
|
||||||
|
on:input="{updatePreviousValue}"
|
||||||
value="{value ?? ''}"
|
value="{value ?? ''}"
|
||||||
readonly="{readonly}"
|
readonly="{readonly}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue