single picker and buttons not visible

[MohammadMrz]

I'm using below code to have buttons displayed on the single date picker. However the buttons are not appearing

`

  <DateRangePicker SingleDatePicker="true" 
      @bind-StartDate="StartDate" 
      @bind-EndDate="EndDate" 
      Context="contekst"
      ApplyButtonClasses="single-picker-buttons"
  >
      <ButtonsTemplate>
          <button class="cancelBtn btn btn-sm btn-default"
      @onclick="@contekst.ClickCancel" type="button">
              Cancel
          </button>
          <button class="cancelBtn btn btn-sm btn-default"
      @onclick="@(e => ResetClick(e, contekst))" type="button">
              Reset
          </button>
          <button class="applyBtn btn btn-sm btn-primary" @onclick="@contekst.ClickApply"
      disabled="@(contekst.TStartDate == null || contekst.TEndDate == null)"
      type="button">
              Apply
          </button>
      </ButtonsTemplate>
  </DateRangePicker>

  @code {
DateTimeOffset? StartDate { get; set; }
DateTimeOffset? EndDate { get; set; }

void ResetClick(MouseEventArgs e, DateRangePicker picker)
{
StartDate = null;
EndDate = null;
// Close the picker
picker.Close();
// Fire OnRangeSelectEvent
picker.OnRangeSelect.InvokeAsync(new DateRange());
}
}

`

[MohammadMrz]

The buttons get hidden when the component is in such a mode where it can auto apply the provided value. You can control this thrugh a parameter called AutoApply. The odd thing is that its defualt value is different based on whether the component is in single or multi mode, which might be a bit confusing.

To solve the issue and show the buttons, you can do one of the following:

explicitly set the AutoApply="false" override the display styling applied to their div wrapper.

Both workarounds are shown here: https://blazorrepl.telerik.com/wHkbnaYW46S27TQd50