Unexpected vibe dropdown component behaviour with ThemeProvider

Platform discussions
, , ,
1

I’m on the way to develop “item action feature”. It contains some of Dropdown components and all had been good until I apply “themeProvider”:

import React, { useEffect, useState } from ‘react’;
import ReactDOM from ‘react-dom/client’;
import { ThemeProvider } from “@vibe/core”;
import mondaySdk from “monday-sdk-js”;
import App from ‘./App’;

const monday = mondaySdk();

const useGetContext = () => {
const [context, setContext] = useState({});

useEffect(() => {
const onContext = (res: any) => {
console.log(‘Context updated:’, res.data);
setContext(res.data);
};

monday.get('context').then((res: any) => {
  onContext(res);
});

}, );

return context;
};

const AppWrapper = () => {
const context = useGetContext();

return (



);
};

ReactDOM.createRoot(document.getElementById(‘root’) as HTMLElement).render(
// <React.StrictMode>

// </React.StrictMode>
);

Dropdown input is rendered correctly but “options window” is not visible when you open it. But It presented in the markup and visible when you increase Height of the parent element for this dropdown . But I can’t just increase height of element as its not user friendly UI and dropdown window should be shown on front of any elements (with position absolute I guess)

again all good without “themeProvider”

“dependencies”: {
“@vibe/core”: “^3.46.1”,
“monday-sdk-js”: “^0.5.6”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”
},

  <div style={{ 
        height: '300px', // <- UNDESIRED SOLUTION (Give space for dropdown options )window
     
      }}>
        <Dropdown
          placeholder="Choose a template..."
          options={dropdownOptions}
          onChange={handleItemSelect}
          value={selectedItem}
          searchable={true}
          clearable={true}
        />
      </div>