Click events on Options

[Mike Sowerbutts]

I am have a sporadic issue where the click events from buttons I have added to the itemTemplate don't fire.

Is there something I can do to prevent the default "Option Selected" click event from firing as I believe that is essentially stopping the other event from firing (edit or delete)

As I mentioned, this is sporadic, and generally occurs after I have added an Option to my addable picklist and updated this.state.options with the new item. It fires the event sometimes, but mostly, it just fires the onchange or onblur events.

The two buttons both have onClick event handlers attached, sometimes they fire, sometimes they dont...

[Sureshkumar P]

Hi Mike,

We will validate the requirement in our component. We update you in two business days (June 20^th, 2022).

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Mike,

We have override the default select option using event.stopPropagation method.

Find the code example here;

popupOpen(args) {

    var buttons = document.querySelectorAll('.btn');

    for (var button of buttons) {

      button.addEventListener(

        'mousedown',

        function (e) {

          e.stopPropagation();

        },

        true

      );

    }

  }

  //set the value to item template

  itemTemplate(data) {

    return (

      <div>

        <span>

          <span class="name">{data.Name}</span>

          <button class="btn">Edit</button>

        </span>

      </div>

    );

  }

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <div id="template">

            <ComboBoxComponent

              id="employees"

              ref={(ComboBox) => {

                this.listObj = ComboBox;

              }}

              dataSource={this.employeesData}

              fields={this.fields}

              placeholder="Select an employee"

              itemTemplate={this.itemTemplate}

              popupHeight="270px"

              open={this.popupOpen.bind(this)}

            />

          </div>

        </div>

      </div>

    );

  }

 

Find the sample here; https://stackblitz.com/edit/react-fcisjn-foczqd?file=index.js

Regards,

Sureshkumar P