Is there any way to bind a state value and a bindable value in the same time in a component?

[tan-zhiheng]

Backgroud

I want to creat a component that can be controled by other component throuth context.

Code

component

<script>
        import {getInputState} from '$lib/input.state.svelte';
	let { value = $bindable(), ...props } = $props();
        const {inputValue} = getInputContext()
        inputValue.value = value  // <= I want to control in inputContext like set value to empty string, but it can be only read value in this way.
</script>

<input bind:value={value} {...props} />

parent component

<script>
        import {setInputContext} from '$lib/input.state.svelte';
        const {resetInputValue} = setInputContext()
        resetInputValue() // <= not work
</script>

... other component

$lib/input.state.svelte.js

export class InputState {
	inputValue = $state({
		value: '',
	});
        resetInputValue = ()=>{
                this.inputValue.value = ''
        }
}

const CONTEXT_KEY = Symbol('multi-selector');

export function setInputState() {
	return setContext(CONTEXT_KEY, new InputState());
}

export function getInputState() {
	return getContext(CONTEXT_KEY);
}

[david-plugge]

Runes or signals in general are not designed for two way bindings. You want to have a single source of truth. You can take a look at how bits-ui does it using a box: https://github.com/huntabyte/bits-ui/blob/edc7eba4f47d8be1643f2ef590c9196b649c6686/packages/bits-ui/src/lib/bits/select/components/select.svelte#L33

[tan-zhiheng]

Thank you very much.