User input not refreshing multi-checkbox

Hi folks,
I have a text input field , that inserts a new “Hobby” into the “HobbiesCategories” database and then refreshes the multi-checkbox field. This all works, however it is also inserting parts of the “user input word” into new records.

Example: if the user pauses while typing the word Knitting it will insert a new record for “Kn” (not correct) insert another new record for “nit.” (not correct), then finally a new record for “Knitting” (correct).

What am I doing wrong? Is there another way to do this?
I did originally have the text input field code in the same function as the add button code but the multi-checkbox field did not show the new name until a second name was input. I also tried saving and refreshing the dataset but that didn’t work either.

Thank you for the help,
Sylvia

Page Elements

  • database = HobbiesCategories

  • text input field = m1HobbiesInput

  • multi-checkbox field = m1HobbiesCheckboxes

  • add button = m1HobbiesBut

//check list setup
$w.onReady(() => {
wixData.query( ‘HobbiesCategories’ )
.ascending( ‘title’ )
.find()
.then(res => {
let options = ;
options.push(…res.items.map(title => {
return { “value” : title.title, “label” : title.title };
}));
$w( ‘#m1HobbiesCheckboxes’ ).options = options;

        }); 

//text input field

export function m1HobbiesInput_input(event) {
wixData.insert( ‘HobbiesCategories’ , {
‘title’ : $w( ‘#m1HobbiesInput’ ).value});
}

//add button code

export function m1HobbiesBut_click(event) {
$w( “#m1HobbiesInput” ).value = null ;
wixData.query( ‘HobbiesCategories’ )
.ascending( ‘title’ )
.find()
.then((result) => {
let options = ;
options.push(…result.items.map(title => {
return { “value” : title.title, “label” : title.title };
}));
$w( ‘#m1HobbiesCheckboxes’ ).options = options;
})
}

I figured it out. Here is the solution in case it helps anyone else. I had to put the “insert” inside the click event and add a .then statement.

export function m1HobbiesBut_click(event) {
wixData.insert( ‘HobbiesCategories’ , {
‘title’ : $w( ‘#m1HobbiesInput’ ).value
})
.then(() => {
$w( “#m1HobbiesInput” ).value = null
wixData.query( ‘HobbiesCategories’ )
.ascending( ‘title’ )
.find()
.then((result) => {
let options = ;
options.push(…result.items.map(title => {
return { “value” : title.title, “label” : title.title };
}));
$w( ‘#m1HobbiesCheckboxes’ ).options = options;
$w( ‘#m2HobbiesCheckboxes’ ).options = options;
})
});