WordPress Plugin development: Category filter in media library makes the page to reload - wordpress

Question

I am building a plugin where I have a dropdown category filter on media library.
The filter works fine on list view but on grid view mode when I select a category, rather than media files getting filtered the page refreshes and nothing is filtering.
I am not using any custom taxonomy, so I have register the taxonomy (in my case it is category to attachment post type)
function register_taxonomy_for_post_type() {
//$this->taxonomy = apply_filters( 'cool_media_taxonomy', $this->taxonomy );
if( taxonomy_exists( $this->taxonomy ) ) {
register_taxonomy_for_object_type( $this->taxonomy, $this->post_type );
} else {
$args = array(
'hierarchical' => true,
'show_admin_column' => true,
'update_count_callback' => array( $this, 'update_count' ),
);
register_taxonomy( $this->taxonomy, array( $this->post_type ), $args );
}
}
add_action( 'init', array( $this, 'register_taxonomy_for_post_type' ), 0 );
Localization:
function enqueue_media_action() {
require_once plugin_dir_path( __FILE__ ) . 'classes/class-walker-category-mediagrid-filter.php';
global $pagenow;
if( wp_script_is( 'media-editor' ) && 'upload.php' === $pagenow ) {
if( $this->taxonomy !== 'category' ) {
$options = array(
'taxonomy' => $this->taxonomy,
'hierarchical' => true,
'hide_empty' => false,
'show_count' => true,
'orderby' => 'name',
'order' => 'ASC',
'value' => 'id',
'echo' => false,
'walker' => new WalkerCategoryMediaGridFilter(),
);
} else {
$options = array(
'taxonomy' => $this->taxonomy,
'hierarchical' => true,
'hide_empty' => false,
'show_count' => true,
'orderby' => 'name',
'order' => 'ASC',
'value' => 'id',
'echo' => false,
'walker' => new WalkerCategoryMediaGridFilter(),
);
}
$attachment_terms = wp_dropdown_categories( $options );
$attachment_terms = preg_replace( array( "/<select([^>]*)>/", "/<\/select>/" ), "", $attachment_terms );
echo '<script type="text/javascript">';
echo '/* <![CDATA[ */';
echo 'var coolmediafilter_taxonomies = {"' . $this->taxonomy . '":{"list_title":"' . html_entity_decode( __( 'All categories', $this->text_domain ), ENT_QUOTES, 'UTF-8' ) . '","term_list":[' . substr( $attachment_terms, 2 ) . ']}};';
echo '/* ]]> */';
echo '</script>';
wp_enqueue_script('coolmediafilter-media-views', plugins_url( 'js/cmf-media-views.js', __FILE__ ), array( 'media-views' ), '1.0.0', true );
$cats = $this->get_accessible_categories();
$filtered_cats = array(
'hide_empty' => false,
'include' => $cats,
'orderby' => 'name',
'order' => 'ASC',
);
wp_localize_script( 'coolmediafilter-media-views', 'MediaLibraryCategoryFilterOptions',
array(
'terms' => get_terms(
$this->taxonomy,
$filtered_cats
),
)
);
}
wp_enqueue_style( 'coolmediafilter', plugins_url( 'css/coolmediafilter.css', __FILE__ ), array(), '1.0.0' );
}
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_media_action' ) );
The script:
(function(){
/**
* Create a new MediaLibraryTaxonomyFilter we later will instantiate
*/
var MediaLibraryCategoryFilter = wp.media.view.AttachmentFilters.extend({
id: 'media-view-category-filter',
createFilters: function() {
var filters = {};
// Formats the 'terms' we've included via wp_localize_script()
_.each( MediaLibraryCategoryFilterOptions.terms || {}, function( value, index ) {
filters[ value.term_id ] = {
text: value.name,
props: {
// The WP_Query var for the taxonomy
category: value.term_id,
}
};
});
filters.all = {
// Default label
text: 'All categories',
props: {
// The WP_Query var for the taxonomy
category: ''
},
priority: 10
};
this.filters = filters;
}
});
/**
* Extend and override wp.media.view.AttachmentsBrowser to include our new filter
*/
var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
createToolbar: function() {
// Make sure to load the original toolbar
AttachmentsBrowser.prototype.createToolbar.call( this );
this.toolbar.set( 'MediaLibraryCategoryFilter', new MediaLibraryCategoryFilter({
controller: this.controller,
model: this.collection.props,
priority: -75
}).render() );
}
});
})()
what I am doing wrong? Any suggestion will be very helpful.
UPDATE: Screenshot of console from FireFox