TWebToast issues in TMS Web Core v2.9.2.0

  1. When you have set level=llv4 (which should be bootstrap4 compatible) the render in browser is wrong because:
    data-bs-autohide → in BootStrap4 should be data-autohide
    data-bs-delay → in BootStrap4 should be data-delay
    data-bs-animation → in BootStrap4 should be data-animation
    data-bs-dismiss="toast" → in BootStrap4 should be data-dismiss="toast"

in general everything without -bs- for the Bootstrap4

  1. In attachment prog for repro.
    toast3.zip (1.7 MB)

The AutoDelete=False for deffined toast item ... when you click on the button "Show toast 1" and waiting for the hide ... and if you click again ... we have two toasts with the same content, the same for the next clicks. Should be use the same toast.item[0] ... why do they multiply?

Bootstrap did breaking changes between v4 and v5.
We adapted therefore the code to be Bootstrap v5 compatible.
Given the type of breaking changes that Bootstrap did, we do not see how to allow automatic switching of code between Bootstrap 4 and Bootstrap 5. We also thought that going forward, it would be no issue if users switch to Bootstrap 5.

Ok, I’ll try moving the app to Bootstrap 5, but what about point 2?
Did you run my example program to reproduce it? It’s already on Bootstrap 5, and looks like a straight-up bug. Were you able to reproduce it?

We could see the 2nd issue and applied a fix that will be included in the next release.

ok thank you ... btw workaround for TWeb Toast on Bootstrap 4, maybe it will be useful.

procedure TfrmDashboard.WebToastAlertsShow(Sender: TObject; AIndex: Integer;
  AElement: TJSHTMLElement);
var AttributeValue: String;
    CloseBtnElement: TJSHTMLElement;
begin
  if((Sender as TWebToast).Level=llv4)then
    begin
      if((AElement.hasAttribute('data-bs-delay')))then
        begin
          AttributeValue := AElement.getAttribute('data-bs-delay');
          AElement.removeAttribute('data-bs-delay');
          AElement.setAttribute('data-delay',AttributeValue);
        end;

      if((AElement.hasAttribute('data-bs-autohide')))then
        begin
          AttributeValue := AElement.getAttribute('data-bs-autohide');
          AElement.removeAttribute('data-bs-autohide');
          AElement.setAttribute('data-autohide',AttributeValue);
        end;

      if((AElement.hasAttribute('data-bs-animation')))then
        begin
          AttributeValue := AElement.getAttribute('data-bs-animation');
          AElement.removeAttribute('data-bs-animation');
          AElement.setAttribute('data-animation',AttributeValue);
        end;

      CloseBtnElement := TJSHTMLElement(AElement.querySelector('button'));
      if(Assigned(CloseBtnElement) and (CloseBtnElement.hasAttribute('data-bs-dismiss'))) then
        begin
          AttributeValue := CloseBtnElement.getAttribute('data-bs-dismiss');
          CloseBtnElement.removeAttribute('data-bs-dismiss');
          CloseBtnElement.setAttribute('data-dismiss',AttributeValue);
        end;
    end;
end;