Issue with custom fieldtype using shared form field

Question

I am working on a custom fieldtype which essentially displays a select dropdown with some custom options. To keep in line with EE's styles I'm trying to use their shared form field to get it to display with their rich select dropdown field view.

The issue arises when this is added to a Fluid field. When it's first added to the Fluid field the options are populated, but you're unable to click the dropdown to display them (inspector tools verifies the options actually are there in the .field-drop-choices div. However, you're able to save the channel entry and when you go back to edit it you're then able to click the dropdown to display the option list.

This is my current display_field() method:

public function display_field($data)
{
    ee()->javascript->output('
        FluidField.on("dropdown", "add", function(element){
            Dropdown.renderFields(element);
        });
    ');

    ee()->lang->loadfile('fieldtype_name');

    $forms = $this->get_forms();

    if(empty($forms))
    {
        return '<div class="alert inline warn"><p>'.lang('error_message').'</p></div>';
    }
    else
    {
        return ee('View')->make('ee:_shared/form/field')->render(array(
            'field_name' => $this->field_name,
            'field' => array(
                'type' => 'dropdown',
                'choices' => $forms,
                'value' => $data
            ),
            'grid' => FALSE
        ));
    }
}

Is there something I'm missing to get this to start working immediately when added?

Answer 1

Turns out I just needed this block to reference my own fieldtype name instead of the EE fieldtype of "dropdown". So instead of this:

ee()->javascript->output('
    FluidField.on("dropdown", "add", function(element){
        Dropdown.renderFields(element);
    });
');

It should be this:

ee()->javascript->output('
    FluidField.on("my_fieldtype_name", "add", function(element){
        Dropdown.renderFields(element);
    });
');