I also made this an issue on GitHub, feel free to close either one: react-ui <Dropdown /> not rendering correctly in Webkit browsers · Issue #32 · datocms/plugins-sdk · GitHub
Firefox:
Safari:
Reproduction repo: GitHub - moritzjacobs/datocms-react-ui-dropdown-repro via npx tmplr datocms/datocms-plugin-template
import { connect, RenderFieldExtensionCtx } from "datocms-plugin-sdk";
import "datocms-react-ui/styles.css";
import ConfigScreen from "./entrypoints/ConfigScreen";
import { render } from "./utils/render";
import {
Canvas,
Dropdown,
Button,
CaretUpIcon,
CaretDownIcon,
DropdownMenu,
DropdownOption,
DropdownSeparator,
} from "datocms-react-ui";
const Foobar = ({ ctx }: { ctx: RenderFieldExtensionCtx }) => {
return (
<Canvas ctx={ctx}>
<Dropdown
renderTrigger={({ open, onClick }) => (
<Button
onClick={onClick}
rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
>
Options
</Button>
)}
>
<DropdownMenu>
<DropdownOption onClick={() => {}}>Edit</DropdownOption>
<DropdownOption disabled onClick={() => {}}>
Duplicate
</DropdownOption>
<DropdownSeparator />
<DropdownOption red onClick={() => {}}>
Delete
</DropdownOption>
</DropdownMenu>
</Dropdown>
</Canvas>
);
};
connect({
renderConfigScreen(ctx) {
return render(<ConfigScreen ctx={ctx} />);
},
manualFieldExtensions() {
console.log("manualFieldExtensions");
return [
{
id: "foobar",
name: "Foobar: Just a test",
type: "editor",
fieldTypes: ["string"],
},
];
},
renderFieldExtension(fieldExtensionId: string, ctx: RenderFieldExtensionCtx) {
switch (fieldExtensionId) {
case "foobar":
return render(<Foobar ctx={ctx} />);
}
},
});
… using the “Basic example” from here.
Thanks for your support!
If every bug report came in with as much info, they’d all get fixed a lot faster!