Hello everyone,
I am facing a weird bug with tagify and date range picker.
When i choose a tagify tag it opens my date range picker, don't know why?!?
Thanks,
Rodrigo
Perhaps show the code to give us a chance?
Both inputs having same name or id perhaps?
It's not the same name...
<form id="form1">
<div class="d-flex flex-row style1292">
<div class="d-flex flex-column style1334">
<p class="style1296">Date Range</p>
<input id="daterange" name="daterange" is="dmx-date-range-picker" class="style1303">
</div>
</div>
<div class="d-flex flex-row style1292">
<div class="d-flex style1293 flex-column">
<p class="style1296">Symbol</p>
<input id="filter_symbol" name="filter_symbol" type="text" class="form-control">
</div>
<div class="d-flex style1293 flex-column">
<p class="style1296">Result</p>
<select id="filter_result" class="form-select select-style" name="filter_result">
<option value="2">Won</option>
<option value="3">Lost</option>
</select>
</div>
</div>
<div class="d-flex flex-row style1292">
<div class="d-flex style1293 flex-column">
<p class="style1296">Type</p>
<select id="filter_position" class="form-select select-style" name="filter_position">
<option value="1">Buy</option>
<option value="2">Sell</option>
</select>
</div>
<div class="d-flex style1293 flex-column">
<p class="style1296">Playbook</p><select id="filter_playbook" class="form-select select-style" name="filter_playbook" dmx-bind:options="query_playbook.data.query" optiontext="playbook_name" optionvalue="playbook_name">
</select>
</div>
</div>
<div class="d-flex flex-row style1292">
<div class="d-flex style1293 flex-column">
<p class="style1296">Trigger</p>
<input is="dmx-tagify" id="tagify1" name="tagify1" class="tagify-select" dmx-bind:data="query_alltriggers.data.query" tag-text="_['Name of Trigger']" tag-value="_['Name of Trigger']" nocustom="true" skip-invalid="true" min-chars="1" noinput="true" max-items="15" style="--tags-disabled-bg: rgba(241, 241, 241, 0); --tags-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tag-bg: #a680ff; --tag-hover: #7439ff; --tag-text-color: #fff; --tag-remove-bg: rgba(255, 34, 34, 0.54); --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0); --tag-remove-btn-bg: rgba(255, 255, 255, 0);">
</div>
<div class="d-flex style1293 flex-column">
<p class="style1296">Mistake</p>
<input is="dmx-tagify" id="tagify2" name="tagify1" class="tagify-select" dmx-bind:data="query_alltriggers.data.query" tag-text="_['Name of Trigger']" tag-value="_['Name of Trigger']" nocustom="true" skip-invalid="true1" min-chars="1" noinput="true" max-items="15" style="--tags-disabled-bg: rgba(241, 241, 241, 0); --tags-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tag-bg: #a680ff; --tag-hover: #7439ff; --tag-text-color: #fff; --tag-remove-bg: rgba(255, 34, 34, 0.54); --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0); --tag-remove-btn-bg: rgba(255, 255, 255, 0);">
</div>
</div>
<div class="d-flex flex-row style1292">
<div class="d-flex style1293 flex-column">
<p class="style1296">Habits</p>
<input is="dmx-tagify" id="tagify3" name="tagify1" class="tagify-select" dmx-bind:data="query_alltriggers.data.query" tag-text="_['Name of Trigger']" tag-value="_['Name of Trigger']" nocustom="true" skip-invalid="true1" min-chars="1" noinput="true" max-items="15" style="--tags-disabled-bg: rgba(241, 241, 241, 0); --tags-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tag-bg: #a680ff; --tag-hover: #7439ff; --tag-text-color: #fff; --tag-remove-bg: rgba(255, 34, 34, 0.54); --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0); --tag-remove-btn-bg: rgba(255, 255, 255, 0);">
</div>
<div class="d-flex style1293 flex-column">
<p class="style1296">Mindset</p>
<input is="dmx-tagify" id="tagify3" name="tagify1" class="tagify-select" dmx-bind:data="query_alltriggers.data.query" tag-text="_['Name of Trigger']" tag-value="_['Name of Trigger']" nocustom="true" skip-invalid="true1" min-chars="1" noinput="true" max-items="15" style="--tags-disabled-bg: rgba(241, 241, 241, 0); --tags-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tag-bg: #a680ff; --tag-hover: #7439ff; --tag-text-color: #fff; --tag-remove-bg: rgba(255, 34, 34, 0.54); --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0); --tag-remove-btn-bg: rgba(255, 255, 255, 0);">
</div>
</div>
<div class="d-flex flex-row style1292">
<div class="d-flex style1293 flex-column">
<p class="style1296">Custom</p>
<input is="dmx-tagify" id="tagify4" name="tagify1" class="tagify-select" dmx-bind:data="query_alltriggers.data.query" tag-text="_['Name of Trigger']" tag-value="_['Name of Trigger']" nocustom="true" skip-invalid="true1" min-chars="1" noinput="true" max-items="15" style="--tags-disabled-bg: rgba(241, 241, 241, 0); --tags-border-color: rgba(66, 82, 94, 0.39); --tags-hover-border-color: rgba(66, 82, 94, 0.39); --tags-focus-border-color: rgba(66, 82, 94, 0.39); --tag-bg: #a680ff; --tag-hover: #7439ff; --tag-text-color: #fff; --tag-remove-bg: rgba(255, 34, 34, 0.54); --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0); --tag-remove-btn-bg: rgba(255, 255, 255, 0);">
</div>
</div>
<div class="d-flex style1297">
<div class="d-flex style1299 justify-content-center align-items-center">
<p class="style1300">Reset Filters</p>
</div>
<div class="d-flex justify-content-center align-items-center style1301">
<p class="style1300 text-light">Done</p>
</div>
</div>
</form>
That id feels like a possible suspect. Try a different id (eg. daterange1)
And to be safe, get all id’s to be unique (eg. tagify3 ).
Nop, i've changed the date range id and all other id's and it didn't work.
