data-allow-clear="true" with .Net 6 with asp-items="ViewBag.ClientRole" does not clear the selection

Dear support!

I am using Metronic 8 with Html theme 8 and .Net 6 to develop my application.

In the SELECT element, I am using data-allow-clear="true" and options are loads from the server and used in HTML as showed below:

a) Instruction in server controller:

ViewData["ClientRole"] = new SelectList(_context.ClientRole.Where(x => x.ClientAccountId.Equals(_clientAccountId)).OrderBy(o => o.Name), "ClientRoleId", "Name");

b) Select element in HTML page:

<div class="col-lg-6 fv-row">
<label asp-for="ClientRoleId" class="required form-label"></label>
<select id="input-client-role-id" asp-for="ClientRoleId" class="form-select" data-control="select2" data-allow-clear="true" asp-items="ViewBag.ClientRole"><option disabled selected>Select an option</option></select>
</div>

When the page is loaded, the disabled option is showed, but if I select some option in the list, I can not clear the selection any more. The behave desired after clicking the "x" button is to clear the selection mad before and the element show the disabled option again.

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hi,

May I know what is your Metronic version ?
In the recent version of Metronic we fixed this issue and you can check it here

Please try to get latest Metronic ASP.NET Core version from Metronic Downloads.

Regards.

Hi!

I am using version 8.1.6.

I am using demo 8 and the link you have posted for ASP.NET Core does not have demo 8 available.

Regards.

Hi,

data-allow-clear should be used in combination with the placeholder attribute.
Try to add data-placeholder attribute to your select element.
data-placeholder="your place holder"

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Lauris, thanks for your instructions about data-allow-clear. After I have put data-placeholder attribute, the clear option worked properly.

Best regards.

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(