Excel VBA - Unable to fire ng-change event

Question

I'm pretty new to VBA and I'm trying to automate something but got stuck on the fireEvent part.

Basically I want to trigger the event of the dropdown box, but I'm not able to figure how to do this.

The code below selects the option I want, but can't get it to trigger the new page event and ends up with

"Run time error: 5 Invalid procedure call or argument"

Please, I would be very grateful if someone can help me finding a solution for this.

My Excel VBA code:

Sub Auto2()
    Dim ie As New InternetExplorer
    
    With ie
        .Visible = True
        .navigate ""
            
        While .Busy Or .readyState < 4: DoEvents: Wend
    
        ie.document.getElementsByClassName("input-group-addon")(0).Click
        ie.document.getElementsByClassName("today day")(0).Click
    
        While .Busy Or .readyState < 4: DoEvents: Wend

        ie.document.querySelector("select[name='tipoRecibo']").Value = "string:R"
        ie.document.querySelector("select[name='tipoRecibo']").fireEvent "ng-change"
    
    End With
End Sub

Web code:

<div class="col-md-4 col-xs-12">
    <lf-dropdown
        class="ng-isolate-scope"
        lf-model="$ctrl.formParameters.tipoRecibo"
        lf-label="Tipo"
        name="tipoRecibo"
        lf-empty-option="true"
        lf-disabled="$ctrl.isTipoDisabled()"
        lf-change="$ctrl.pfChange(model)"
        lf-options="$ctrl.getTipos()"
    >
        <div class="form-group form-group-sm">
            <label title="" class="ng-binding" ng-attr-data-toggle="{{$ctrl.lfHelp ? 'tooltip' : undefined }}"> Tipo<!-- ngIf: $ctrl.lfHelp --> </label>

            <select
                name="tipoRecibo"
                class="form-control ng-pristine ng-untouched ng-valid ng-empty"
                ng-disabled="$ctrl.lfDisabled({model: $ctrl.lfModel})"
                ng-model="$ctrl.lfModel"
                ng-init="$ctrl.lfOptions\[0\]"
                ng-options="option.value as option.text for option in $ctrl.lfOptions"
                ng-change="$ctrl.lfChange({model: $ctrl.lfModel})"
            >
                <!-- ngIf: $ctrl.lfEmptyOption -->

                <option class="ng-pristine ng-untouched ng-valid ng-scope ng-empty" value="" ng-if="$ctrl.lfEmptyOption" ng-model="$ctrl.lfModel"></option>

                <!-- end ngIf: $ctrl.lfEmptyOption -->

                <option value="string:R" label="Fatura-Recibo">Fatura-Recibo</option>
                <option value="string:FTR" label="Fatura">Fatura</option>
            </select>

            <div class="opcional-label ng-binding"></div>
            <span class="help-block"></span>
        </div>
    </lf-dropdown>
</div>

Answer 1

I think the event is not ng-change I think it's only change. Fireevent doesn't work in most cases today. As QHaar wrote, try it with attaching and dispatching the event.

You can have a look here for more information how to check which events are practicable:
Automate IE via Excel to fill in a dropdown and continue

Try the following:

Sub Auto2()
  
  Dim ie As New InternetExplorer
  Dim nodeDropdown As Object
  
  ie.Visible = True
  ie.navigate ""
  While .Busy Or ie.readyState < 4: DoEvents: Wend

  ie.document.getElementsByClassName("input-group-addon")(0).Click
  ie.document.getElementsByClassName("today day")(0).Click

  While .Busy Or .readyState < 4: DoEvents: Wend

  Set nodeDropdown = ie.document.querySelector("select[name='tipoRecibo']")
  nodeDropdown.Value = "string:R"
  Call TriggerEvent(ie.document, nodeDropdown.Value, "change")
End Sub

And this procedure to trigger the events:

Private Sub TriggerEvent(htmlDocument As Object, htmlElementWithEvent As Object, eventType As String)

  Dim theEvent As Object

  htmlElementWithEvent.Focus
  Set theEvent = htmlDocument.createEvent("HTMLEvents")
  theEvent.initEvent eventType, True, False
  htmlElementWithEvent.dispatchEvent theEvent
End Sub