Strange Things Happening With Inputs in a Repeat Block

Wappler 2.7.1 Windows 10

I have some inputs which are part of a search mechanism.

One input is a select, which determines what to search for. It then dmx-shows one of 10 other inputs to allow the user to choose the value they want to search by - name, gender, age range, etc.

So far so good, it has been working well.

Then…

I decided I wanted the user to be able to add more search terms, so I have placed that structure in a repeat block.

Now the behaviour has gone really strange whereby the inputs keep de-selecting themselves and changing values are you type into them in an unexpected way.

I have pasted the code below, and sent a pm to @Teodor with details of the design to take a look at and steps to see the behaviour.

Best wishes,

Antony.

Here is the code.

search_terms_contact is a Data Store…

<div dmx-repeat:rg_search_terms_contact="search_terms_contact.data">
	<div class="row m-3">
		<div class="col">
			<p class="debug_blue">Search By: ({{search_terms_contact.data.count()}})</p>
			<p class="debug_blue">index:{{$index}}, id: {{$id}}</p>
			<p class="debug_blue">combiner: {{combiner}}</p>
			<p class="debug_blue">search_by: {{search_by}}</p>
			<p class="debug_blue">search_for_text: {{search_for_text}}</p>
			<p class="debug_blue">search_for_number: {{search_for_number}}</p>
			<p class="debug_red">selected: {{i_contact_search_by.value}}</p>
			<p class="debug_red">name: {{i_contact_search_name.value}}</p>
			<p class="debug_red">gender: {{i_contact_search_gender.value}}</p>
			<p dmx-on:click="search_terms_contact.insert({combiner: 'and', search_by: 'name', search_for_text: 'none', search_for_number: 0})" class="action_left m-0">Add another search term</p>
			<p dmx-on:click="search_terms_contact.delete({$id: $id})" class="action_left m-0" dmx-show="$index>0">Remove this search term</p>
		</div>

		<div class="col_content_search col  align-self-center" id="c_contact_search_options">
			<!-- selection of what to search for -->
			<select id="i_contact_search_by" class="select_search_type" name="contact_search_by" dmx-on:changed="search_terms_contact.update({$id: $id},{search_by: i_contact_search_by.value});notification.info('Value Changed!')">
				<option value="name">Name</option>
				<option value="activity">Activity</option>
				<option value="activity_type">Activity Type</option>
				<option value="activity_tag">Activity Tag</option>
				<option value="contact_tag">Contact Tag</option>
				<option value="region">Region</option>
				<option value="age_range">Age Range</option>
				<option value="gender">Gender</option>
				<option value="brand">Brand</option>
			</select>
			<!-- value inputs - selected from above -->
			<input novalidate id="i_contact_search_name" name="contact_search_name" type="text" class="input_search" placeholder="Contact name..." dmx-show="i_contact_search_by.value=='name'"
				dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_text: i_contact_search_name.value})">
			<select id="i_contact_search_contact_tag" class="select_search" name="contact_search_contact_tag"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 10, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-on:click="" dmx-show="i_contact_search_by.value=='contact_tag'"
				dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_number: i_contact_search_contact_tag.value})">
				<option value="0">Select Contact Tag...</option>
			</select><select id="i_contact_search_region" class="select_search" name="contact_search_region"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 11, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-on:click="" dmx-show="i_contact_search_by.value=='region'">
				<option value="0">Select Region...</option>
			</select><select id="i_contact_search_activity_type" class="select_search" name="contact_search_activity_type"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 2, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='activity_type'">
				<option value="0">Select Activity Type...</option>
			</select><select id="i_contact_search_activity_tag" class="select_search " name="contact_search_activity_tag"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 1, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='activity_tag'">
				<option value="1">Select Activity Tag...</option>
			</select> <select id="i_contact_search_activity" class="select_search" name="contact_search_activity"
				dmx-bind:options="events.data.activities.where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)" optiontext="title_internal" optionvalue="id"
				dmx-show="i_contact_search_by.value=='activity'">
				<option value="1">Select Activity...</option>
			</select>
			<select id="i_contact_search_gender" class="select_search" name="contact_search_gender"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 12, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='gender'" dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_number: i_contact_search_gender.value})">
				<option value="1">Select gender...</option>
			</select>
			<select id="i_contact_search_age_range" class="select_search" name="contact_search_age_range"
				dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 13, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
				optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='age_range'">
				<option value="1">Select age range...</option>
			</select>
			<select id="i_contact_search_brand" class="select_search" name="contact_search_brand" dmx-bind:options="brands.data.brands" optiontext="brand_name_internal" optionvalue="id" dmx-show="i_contact_search_by.value=='brand'">
				<option value="1">Select brand...</option>
			</select>

		</div>
	</div>
</div>