Skip to content

Conversation

eriklharper
Copy link
Contributor

@eriklharper eriklharper commented Aug 7, 2025

Related Issue: #12278

Summary

This PR introduces a useValue controller for handling direct value changes and managing input and change event emitting behavior for form components that implement a value property.

useValue exposes the following API:

  • inputValue({ inputEventEmitter: EventEmitter, value: string }) method that takes the component's custom input EventEmitter instance and the value to input. This will trigger the component's input event and should be called in response to direct user input, via keyboard and mouse events. useValue handles setting the component's value property and emitting the input event.
  • commitCurrentValue({ changeEventEmitter: EventEmitter }) method that takes the component's custom change EventEmitter instance and handles committing the component's currently set value. This method should be called when the Enter key is pressed while the component has focus and when the component loses focus (blurred). useValue will emit the component's change event only if the component's current value differs from useValue's internally-managed lastCommittedValue.
  • commitValue({ changeEventEmitter: EventEmitter, value: string }) method that takes the component's custom change EventEmitter instance and the value to commit. useValue will emit the component's change event only if the supplied value differs from useValue's internally-managed lastCommittedValue. This method should be called on Enter keypress or blur and only when there is a need to pass a custom value that is not already set on the component, such as a reset or clear event where the new value is being set to "" or needs to be restored to a different value, or if the value needs to be validated prior to committing.
  • useValue handles default event prevention for the component's input and change events, restoring the component's value to its internally-tracked previousValue property.
  • useValue also knows not to emit any input or change events when the value is directly modified on a component instance as long as only the above methods are utilized to modify the value in direct response to user input.

…le change, input and direct value setting. Takes component events as arguments and handles emitting logic. Need to handle default prevention and update the direct setting case in input-text.
…12391 without having to call preventDefault on the change event.  Add userChangedValue logic to controller to support direct value setting on the component properly.
…ing the direct value change logic in hostUpdate.
@eriklharper eriklharper changed the title Eriklharper/12278 use value controller feat: useValue controller Aug 7, 2025
@eriklharper eriklharper changed the title feat: useValue controller feat: add useValue controller Aug 7, 2025
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 7, 2025
…umber type. Renaming hasLeadingZeros to getLeadingZeros since it returns an array from the regex match results instead of a boolean.
@eriklharper eriklharper added refactor Issues tied to code that needs to be significantly reworked. and removed enhancement Issues tied to a new feature or request. labels Sep 12, 2025
…ctly set right after a user input event. This was caused by the userChangedValue staying set to true after the value was committed. Now when inputValue and commitValue methods are called, userChangedValue is immediately set back to false right after updating the component's value so that the hostUpdate and willUpdate lifecycle methods will know exactly when the user actually modified the value.
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 12, 2025
…irectValueChange function to fire incorrectly during a user input event. This is making me think that perhaps instead of lastEmittedValue we should make a lastCommittedValue that only gets set in commitValue so that when a direct value change happens it is more distinguishable.
…, "-", "e" or "E" when all the text is selected in the input.
…e best starting point. Many failed tests to fix still, but the general approach is to sync up the selectedItems property right before committing the value with the controller. The selectedItems setter will no longer update the value because we need the controller to handle that.
…alue to accommodate a custom name for combobox-item and potentially others...
…after setting the component's value. I thought this needed to happen, but because there's no property watcher that fires immediately after the value is set like in Stencil, the more appropriate place to reset it back to false is in hostUpdate after handling the direct value change logic.
…w the last 2 remaining failed combobox tests are back from before.
…ittedValue to empty string when the value is falsy.
…hangedValue to valueSetDirectly. Because direct setting of a value property like "selected" for comobobox-item will happen from the parent combobox when the change was initiated by the user via a click or keyboard commit, the name "userChangedValue" doesn't make sense in this case. Tracking whether the property was directly modified or not will always apply, even if that happens as a downstream result of a user action. We'll need to come up with another code pathway to communicating between the parent <> child in a case like this to update parent state when a child is directly changed NOT from user input.
…their parent when their selected property is directly changed. Need to add a test that directly sets selected on a combobox-item when there is already another one selected.
… event once because the 2nd commit action doesn't actually change the value
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Issues tied to a new feature or request. refactor Issues tied to code that needs to be significantly reworked.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant