Statement of Truth change events do not contain the form values

[rsmithadhoc]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Per Slack support request,

Hey design system team, I'm attempting to implement the Statement of Truth web component (https://design.va.gov/components/form/statement-of-truth) and am running into some issues around the on change functions. Currently, we just piece together the whole Statement of Truth with the VaInput and VaCheckbox web components. These each have their own on change functions. Statement of Truth is a little odd because it has three separate on change functions, onVaCheckboxChange, onVaInputBlur, and onVaInputChange. In our current implementation, for VaCheckbox, I can use the on change function to look at the fired event with event.target.checked and easily get whether the checkbox is checked or not. Similarly for VaInput, I can use that on change function to look at event.target.value and get the currently inputted value. For the Statement of Truth web component, these values are not available, at least from what I can find. For checkbox, using onVaCheckboxChange, I sorta kinda found the checked value with event.detail.detail.checked, but this seems like a strange way to get the value. For onVaInputChange, I can't find the inputted value at all, even inside event.detail.detail. Any guidance on this would be appreciated. Hopefully I'm just missing something or looking in the wrong place for the updated values. Thank you!

What I expected to happen

• Being able to access the input and checkbox values from the change events in a standardized way.

Reproducing

Steps to reproduce:

1. Navigate to Statement of Truth
2. Open browser dev tools
3. Type in the input, check the checkbox
4. For the text input event, you won't find the input's value in there. For the checkbox, the value is under detail.detail.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [x] This bug is blocking work planned within the next few sprints
• [ ] This bug is not blocking any work
• [ ] Other

Details

Here's what I believe needs to happen, but this might need further input from the team. I put together a basic PoC draft PR for text input.

• Emit the event from the child component (<va-input> and <va-checkbox>).
  • An onInput event is only returning the last entered character, so we need to get the full value of the input.
• Listen for the event in the parent component (<va-statement-of-truth>).
• Emit a change event from <va-statement-of-truth> containing the value. Put the value in a standardized spot for both the text input and checkbox.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[it-harrison]

PR request here