In select asset view, no filters can be added.

[roffelsaurus]

When in select asset mode, the button "Add filter" does nothing. No errors either.

When opening the plugin using top bar "Media", so in general browsing mode, the button works with no issues.

sanity-plugin-media 1.4.4 (also tested 1.4.9, no difference). sanity-X 2.30.1

If this does not reproduce for you, I'm happy to supply addition info, but hard to know what is pertinent.

[robinpyon]

Thanks @roffelsaurus – this is an interesting one. I'm unable to repro on 1.4.10 with sanity 2.30.1.

Are you able to try nuke your node_modules, reinstall dependencies and see if that works for you?

Otherwise, the output of your package.json and yarn why @sanity/ui may also be useful.

[rylanharper]

I am not sure if this is related, but I had major breaking issues with this plugin using 1.4.10 and react + react-dom version ^18.0.0 (I think the latest version is 18.0.1) --- Downgrading to v 17.0.0 fixed everything:)

[roffelsaurus]

I attempted a clean reinstallation of node_modules, but that did not work.

You mentioned @sanity/ui and noticed that I had the legacy version of that @sanity/components. I dropped that completely and instead rewrote to use latest @sanity/ui on a couple of custom inputs, then did another clean reinstallation, but unfortunately that did not work either.

package.json deps:

"dependencies": {
    "@sanity/base": "^2.30.1",
    "@sanity/cli": "^2.30.0",
    "@sanity/core": "^2.30.1",
    "@sanity/default-layout": "^2.30.1",
    "@sanity/default-login": "^2.30.1",
    "@sanity/desk-tool": "^2.30.1",
    "@sanity/ui": "^0.37.11",
    "@sanity/vision": "^2.30.1",
    "axios": "^0.27.2",
    "base32-encode": "^1.2.0",
    "dotenv": "^10.0.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.4.0",
    "sanity-plugin-media": "^1.4.10",
    "styled-components": "^5.3.5"
  }

yarn why @sanity/ui
yarn why v1.22.10
[1/4] 🤔  Why do we have the module "@sanity/ui"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@sanity/[email protected]"
info Has been hoisted to "@sanity/ui"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "sanity-plugin-media#@sanity#ui"
   - Hoisted from "@sanity#base#@sanity#ui"
   - Hoisted from "@sanity#default-layout#@sanity#ui"
   - Hoisted from "@sanity#default-login#@sanity#ui"
   - Hoisted from "@sanity#desk-tool#@sanity#ui"
   - Hoisted from "@sanity#vision#@sanity#ui"
   - Hoisted from "@sanity#desk-tool#@sanity#field#@sanity#ui"
   - Hoisted from "@sanity#desk-tool#@sanity#form-builder#@sanity#ui"
info Disk size without dependencies: "9.48MB"
info Disk size with unique dependencies: "20.38MB"
info Disk size with transitive dependencies: "27.83MB"
info Number of shared dependencies: 23
✨  Done in 0.95s.

Excerpt from yarn install:

warning "@sanity/default-layout > @sanity/[email protected]" has unmet peer dependency "@sanity/color@^2.0".
warning "@sanity/desk-tool > [email protected]" has incorrect peer dependency "react@^15.0.0".
warning "@sanity/vision > [email protected]" has incorrect peer dependency "react@>=15.5 <=16.x".
warning " > [email protected]" has unmet peer dependency "@sanity/color@^2.1.8".
warning " > [email protected]" has unmet peer dependency "@sanity/icons@^1.2.5".
warning " > [email protected]" has unmet peer dependency "@sanity/types@^2.28.0".
warning "sanity-plugin-media > react-select > @emotion/react > @emotion/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "sanity-plugin-media > [email protected]" has incorrect peer dependency "react@^16.11.0".
warning "sanity-plugin-media > theme-ui > @theme-ui/[email protected]" has incorrect peer dependency "react@^16.11.0".
warning "sanity-plugin-media > theme-ui > @theme-ui/[email protected]" has incorrect peer dependency "react@^16.11.0".
warning "sanity-plugin-media > theme-ui > @theme-ui/[email protected]" has incorrect peer dependency "react@^16.11.0".
warning "sanity-plugin-media > theme-ui > @theme-ui/[email protected]" has incorrect peer dependency "react@^16.8.0".
warning "sanity-plugin-media > theme-ui > @theme-ui/[email protected]" has incorrect peer dependency "react@^16.11.0".
warning " > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".

[robinpyon]

Apologies on the latency here, @roffelsaurus

This should be fixed in 1.4.11 – z-indices are no longer hardcoded and depth is now managed with Sanity UI. Please do shout if you're still seeing issues here.

[arjanmalda]

I am still (or again) experiencing this issue in version 2.0.5 (Sanity version: 3.12.1, Chrome version: 114.0.5735.133).

As proposed above, I also did a clean re-install of my node_modules, unfortunately without any result.

My 'yarn why' output:

yarn why @sanity/ui
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@sanity/ui"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "[email protected]" is incompatible with requested version "react@^15.4.1"
warning Resolution field "[email protected]" is incompatible with requested version "react-dom@^15.4.1"
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/react@^17"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@sanity/[email protected]"
info Reasons this module exists
   - "_project_#@<PROJECT_NAME>#cms#@sanity#google-maps-input" depends on it
   - Hoisted from "_project_#@<PROJECT_NAME>#cms#@sanity#google-maps-input#@sanity#ui"
   - Hoisted from "_project_#@<PROJECT_NAME>#cms#sanity-plugin-iframe-pane#@sanity#ui"
   - Hoisted from "_project_#@<PROJECT_NAME>#cms#sanity-plugin-media#@sanity#ui"
   - Hoisted from "_project_#@<PROJECT_NAME>#cms#@sanity#vision#@sanity#ui"
   - Hoisted from "_project_#@<PROJECT_NAME>#cms#sanity#@sanity#ui"
info Disk size without dependencies: "4.79MB"
info Disk size with unique dependencies: "11.37MB"
info Disk size with transitive dependencies: "18.04MB"
info Number of shared dependencies: 15

My sanity config:

//sanity.config.ts
import { defineConfig } from 'sanity';
import { deskTool } from 'sanity/desk';
import { media } from 'sanity-plugin-media';
import schemaTypes from './schemas/schema';
import structure from './deskStructure';
import templates from './initialValueTemplates';

export default defineConfig({
  title: '<PROJECT_TITLE>',
  projectId: '<PROJECT_ID>',
  dataset: '<DATASET>',
  plugins: [deskTool({ structure }), media()],
  schema: {
    types: schemaTypes,
    templates,
  },
});

For completeness again the issue I am experiencing:

• When I navigate to "Media" using the top bar I am able to open the 'Add filter' menu
• When selecting an asset from an image form field, clicking the 'Add filter' button has no effect. No dropdown is rendered in the DOM.

@robinpyon By any chance, would you be so kind to see if you can reproduce this issue under the above mentioned circumstances and if necessary, re-open the issue?

[schrockwell]

Edit: I opened up a new issue for this: #167.

---

@arjanmalda I am also experiencing this same issue.

When using the Media picker from the top bar, the "Add filter" menu popover is inserted into a portal element div[data-portal] at the bottom of the page, which works.

When clicking "Add filter" from a form field, the popover menu is instead added to a div.media-portal element, but it has the hidden attribute applied, which prevents it from showing.

I'm not sure why there is a difference between these two approaches yet. It might be related to the referenceHidden property from Floating UI not correctly determining the visibility of the "reference" element, whichever one that is.

https://github.com/sanity-io/ui/blob/4e2523f1b0c53a84f51dc6ce025d288a5c242599/src/primitives/popover/popover.tsx#L338

[arjanmalda]

@schrockwell Thank you for opening the other issue 👍