ng-transclude does not work any more after JQuery update

Question

This is a weird issue i have started to encounter after the latest JQuery update.

We use angularjs 1.7.9 in out app. We have following component. It is basically a date field wrapper .

export class DateFieldComponent {
  ...
  transclude: any = {
    iconContent: "?iconContent",
  };
  template: string = `
    <div>
      <span
        ng-click="$ctrl.focusInput()"
        ng-transclude="iconContent"
      />
      <input
        ...
      ></input>
    </div>
  `;
}

angular.module("App").component("dateField", new DateFieldComponent());

As you can see, we use ng-transclude to load an icon on to the input field. We made it in this way so that whoever using this component can dynamically add the icon from the client side.

This component was working fine until we updated JQuery from 3.4.0 to 3.5.0 . After the update the dateField has issues. However there are no console errors. But i was able to pin point the issue to below line

ng-transclude="iconContent"

So if i remove this line, everything works fine. Adding this line back makes the component to not to render properly.

I know for a fact that JQuery update has no effect on angularjs cause angularjs uses its own jquery-lite version. Also as far as i know, ng-transclude has nothing to do with JQuery.

Also i noticed that there are similar issues in all the places we use ng-transclude in our app, after this update.

What am i missing here ? Any clue would be much appreciated.

Answer 1

Turns out we made a simple mistake in the markup which is not working anymore with JQuery 3.5.0 version

this was the culprit

<span
  ng-click="$ctrl.focusInput()"
  ng-transclude="iconContent"
/>

fix was to close the span properly like below

<span
  ng-click="$ctrl.focusInput()"
  ng-transclude="iconContent">
<span/>