Kibana 7.9.2: buttons, inputs, etc. disabled when visualization plugin added to dashboard

[jdd1]

Reference https://github.com/elastic/kibana/issues/79405.

I have created a trivial visualization plugin with a button. The button works when in the visualization creation/configuration screen. However, once the visualization is added to a dashboard, the button appears to be disabled (no click events are produced). I have had similar results with text inputs EuiButtons and other similar interactive elements. This worked in Kibana 7.7.1, so if this is a bug or there are workarounds that need to be implemented, I'd like to know what those are.

To reproduce in dev mode, create a "another_new_plugin" directory under kibana/plugins, and add the following code to that directory. Create an instance of the visualization. While editing the visualization, if you click the button, a "CLICKED" message will appear in the browser debug window. However, if you save that instance then add it to a dashboard, the button will no longer work in the dashboard.

Code follows:
kibana.json:

{
  "id": "anotherNewPlugin",
  "version": "kibana",
  "ui": true,
  "requiredPlugins": ["visualizations"]
}

public/index.ts:

import { PluginInitializerContext } from 'kibana/public';
import { Plugin } from './plugin';

export function plugin(initializerContext: PluginInitializerContext) {
  return new Plugin(initializerContext);
}

public/plugin.tsx:

import { PluginInitializerContext, CoreSetup, CoreStart } from 'kibana/public';

import React from 'react';

class MyVisEditor extends React.Component {

  render() {
    return (
      <div>Nothing to configure</div>
    );
  }

}

const clickFunction = () => {
  console.log("CLICKED!");
};

class MyVisComponent extends React.Component {

  render() {
    return (
      <div>A generic panel
        <div>Click this button:
          <br/>
          <br/>
          <input type="button" onClick={clickFunction} value="BUTTON"/>
        </div>
      </div>
    );
  }

}



const visDefinition = {
  name: "my_vis",
  title: "My Vis!",
  icon: "bullseye",
  visConfig: {
    component: MyVisComponent
  },
  editorConfig: {
    optionsTemplate: MyVisEditor,
  },
  requestHandler: "none",
  responseHandler: "none",
};

export class Plugin {
  constructor(initializerContext: PluginInitializerContext) {
  }

  public setup(core: CoreSetup, { visualizations }) {
    // called when plugin is setting up
    visualizations.createReactVisualization(visDefinition);
  }

  public start(core: CoreStart, { visualizations }) {
  }

  public stop() {
  }
}

[Aaron_Caldwell]

Hello,

It's a little hard to pinpoint, but there were a number of things moving and changing from 7.7.1 to 7.9.2 as part of the new platform migration. What you might consider trying is copying a smaller plugin as a template and working backwards, removing pieces and seeing if it still works as expected. Keep whittling it down until you've got something you can effectively work with as your new plugin.

Hope that helps!

Regards,
Aaron

[jdd1]

After some digging, it appears that you must add the following to your visualization Components in Kibana 7.9:
(This was not necessary in Kibana 7.7.1; not sure about Kibana 7.8).

  componentDidMount() {
    this.props.renderComplete();
  }

  componentDidUpdate() {
    this.props.renderComplete();
  }