After selecting an option from lightning-combobox the dropdown show "Select Progress" instead of the option I picked - salesforce-lightning

Question

When I pick a value from the dropdown (Combobox) instead of keeping the value I picked the dropdown shows "Select Progress" instead.
How can I make the code show the value I picked...???
I am trying to show Start time on one of the Comboboxes and End time on the other, but every time that I pick an option the value disappears, and instead it shows "Select Progress". The same happens in the second Combobox.
The values get passed to the JS code correctly but are not staying in the dropdown.
HTML
<template>
<lightning-card>
<lightning-combobox
class="slds-var-m-around_medium"
name="progress"
label="Starts"
value={value1}
placeholder="Select Progress"
options={options1}
onchange={handleChange1} >
</lightning-combobox>
<lightning-combobox
class="slds-var-m-around_medium"
name="progress"
label="Ends"
value={value2}
placeholder="Select Progress"
options={options2}
onchange={handleChange2}>
</lightning-combobox>
<div class="slds-var-m-around_medium lgc-bg">
<lightning-input type="text" label="Duration" value={duration}></lightning-input>
</div>
</lightning-card>
</template>
JS
import { LightningElement, track } from 'lwc';
export default class Combobox extends LightningElement {
#track value1 = 0;
#track value2 = 0;
#track duration = 0;
#track options1 = [
{ label: '12:00 AM', value: 0 },
{ label: '12:15 AM', value: 0.25 },
{ label: '12:30 AM', value: 0.50 },
{ label: '12:45 AM', value: 0.75 },
{ label: '1:00 AM', value: 1 },
{ label: '1:15 AM', value: 1.25 },
{ label: '1:30 AM', value: 1.50 },
{ label: '1:45 AM', value: 1.75 }
];
#track options2 = [
{ label: '12:00 AM', value: 0 },
{ label: '12:15 AM', value: 0.25 },
{ label: '12:30 AM', value: 0.50 },
{ label: '12:45 AM', value: 0.75 },
{ label: '1:00 AM', value: 1 },
{ label: '1:15 AM', value: 1.25 },
{ label: '1:30 AM', value: 1.50 },
{ label: '1:45 AM', value: 1.75 }
];
handleChange1(event) {
// this.duration -= event.target.value;
this.value1 = event.target.value;
};
handleChange2(event) {
this.value2 = event.target.value;
this.duration = this.value2 - this.value1;
};
}
Before:
enter image description here
After:
enter image description here

Answer 1

As per the lightning-combobox documentation, you can use event.detail.value to grab the selected value in onchange.
The event.detail.value is passed as a string instead of an integer (e.g. '0.25' instead of 0.25). When you then set a string value instead of an integer, the option isn't found and it displays as undefined (Select progress).
You can either change the values to be strings:
const options = [
{ label: '12:00 AM', value: '0' },
{ label: '12:15 AM', value: '0.25' },
{ label: '12:30 AM', value: '0.50' },
{ label: '12:45 AM', value: '0.75' },
{ label: '1:00 AM', value: '1' },
{ label: '1:15 AM', value: '1.25' },
{ label: '1:30 AM', value: '1.50' },
{ label: '1:45 AM', value: '1.75' }
];
... or you can parse an integer in the handleChange() function:
handleChange(e) {
this.value = +e.detail.value; // One of the ways to convert str to int
};
Hope this helps. Happy coding.