I have a React app with Fluent-UI 8 set up using npm install #fluentui/react according to the documents from Microsoft.
When I try their combobox or dropdown components, the dropdown list doesn't appear when clicked on it. I use their examples from the docs, which compiles without errors. But none of their examples work out of the box, and no other information is provided.
The problem is that the dropdown list does not appear when clicked on. Not in Edge, not in Firefox. When I check the elements on the page, I do not see the html elements with the list items, although I can cycle through them with the arrow keys. The list appears from the side when the window is tablet format, and setting ResponsiveMode did nothing. Whith a normal screen however, nothing is displaying, and no onchange events are fired.
This is my code for the dropdown:
import { IStackTokens, ResponsiveMode, Stack } from '#fluentui/react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from '#fluentui/react/lib/Dropdown';
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };
const DropdownControlledMultiExampleOptions = [
{ key: 'fruitsHeader', text: 'Spooler status', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'grape', text: 'Grape' },
{ key: 'broccoli', text: 'Broccoli' },
{ key: 'carrot', text: 'Carrot' },
{ key: 'lettuce', text: 'Lettuce' },
];
export const DropdownList: React.FunctionComponent = () => {
const stackTokens: IStackTokens = { childrenGap: 20 };
return (
<Stack tokens={stackTokens}>
<Dropdown
placeholder="Select an option"
label="Disabled responsive"
options={DropdownControlledMultiExampleOptions}
styles={dropdownStyles}
responsiveMode={ResponsiveMode.unknown}
/>
<Dropdown
placeholder="Select an option"
label="Responsive with panel"
options={DropdownControlledMultiExampleOptions}
styles={dropdownStyles}
/>
</Stack>
);
};
Which I load in my app.tsx
function App() {
return (
<div className="App">
<DropdownList/>
</div>
);
}
Does anyone have an idea how I can get this to work? Or what is causing this?
EDIT and possible solution: It seems that removing the <React.Strict> tags in index.tsx does the job. Don't know why, but then the Fluid-UI controls work fine.
Related
If I am at the docs page and then go to another component that has the same name on the properties it will cause the value of the control input of that property to the keep that same value.
What's even odder is that storybook isnt even using that value, the component is still rendered with the "real" value.
This same bug is causing some controls to just be "set object", "set string" etc.
If I go to the canvas page and back, or if click the "reset controls" button it will restore to default and show objects and strings as they should.
Anyone encountered this and figured out a solution?
I am suspecting it has something to do with using Typescript, and some of the documentations being automatically generated somehow, is it possible to turn this off?
Here is some example code of a story:
import Component from "##/components/Component";
import { Meta, Story } from "#storybook/react";
const meta: Meta = {
title: "Components/Component",
component: Component,
};
export default meta;
const Template: Story = (args) => (
<div style={{ maxWidth: "500px" }}>
<Component
header=""
items={[]}
{...args}
/>
</div>
);
export const Story = Template.bind({});
Story.args = {
header: "Header",
list: [
{
name: "Test 1",
},
{
name: "Test 2",
},
],
};
Story.argTypes = {
list: {
description: "List of items",
table: {
type: {
summary: "Array",
},
},
},
};
I figured it out.
I had several components all under the same title: "XXX/YYY" instead of "XXX/YYY/ComponentName".
I'm using the AntD tree and I have a react element that I want to pass as either an icon or a title because it has custom styling. Due to it being IP I can't share too much code, but my question is:
how can I pass a react element (see below i.e. generic name) as either a title or icon and have antD tree render it?
i.e. this is what I want to pass as a prop to the icon or title
import React from 'react';
const genericName = (props) => {
// code uses props to get some infor for Color
// cant share code due to proprietary reasons
// but it is not needed for this question
const colorHTML = getColor(Color);
return (
<div>
<div className={`colors from`}>${colorHTML}</div>
{pin}
</div>
);
};
export default genericName;
in my console you can see node.icon is a typeof react.element. I want to target that and just pass the prop into antD tree as either title or icon
i.e.
return (
<Tree
icon={node.icon}
/>
)
I've searched and similar answers were given before antD forbid the use of children and strictly allows treeData. All examples I see only use strings in titles/icons, but since antD documentation is very limited, I need to know if my use case is possible. Right now, for the life of me I can't understand why it doesn't populate.
Thank you in advance.
It should definitely work to put a JSX component as title within treeData. Take a look at this snippet, I added a Icon here in one of the titles:
import React from 'react'
import { RightCircleOutlined } from '#ant-design/icons'
type Props = {}
import { Tree } from 'antd';
import type { DataNode, TreeProps } from 'antd/es/tree';
const treeData: DataNode[] = [
{
title: <span>{<RightCircleOutlined />} parent</span>, //icon added here
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{
title: 'leaf',
key: '0-0-0-0',
disableCheckbox: true,
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
},
],
},
];
const Demo: React.FC = () => {
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
};
const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
console.log('onCheck', checkedKeys, info);
};
return (
<Tree
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
onSelect={onSelect}
onCheck={onCheck}
treeData={treeData}
/>
);
};
export default Demo;
Hello dear community,
I want to create a very basic website for my school assignment.
I have a dropdown menu with a Select Component as its implementation. I need to access the selected value, which is a currency in my case, in order to update the information displayed on the page once a currency has been selected.
I am kind of frustrated since I wasn't able to find a helpfull solution to my relatively basic problem (I think it's basic :D)
My component class here:
import { Component } from "react";
import Select from 'react-select';
interface DropdownMenuProps {
values: [{}]
defaultValue: string
}
interface DropdownMenuState { }
/**
* Represents a Dropdown Menu
*/
export default class DropdownMenu extends Component<DropdownMenuProps, DropdownMenuState> {
render() {
return (
<div style={{ width: '120px' }}>
<Select id="dropdown-menu"
placeholder={this.props.defaultValue}
options={this.props.values}
// getOptionValue={(option) => option.value}
// getOptionLabel={(option) => option.label}
/>
</div>
)
}
}
This is how I create a dropdown menu compent:
<DropdownMenu defaultValue="Currency" values={[{ label: "EUR", value: "EUR" }, { label: "GBP", value: "GBP" }, { label: "USD", value: "USD" }]} ></DropdownMenu>
I'm glad for any tips :)
You have to use the onChange prop of react-select:
<select
id="dropdown-menu"
onChange={handleSelectChange}
>
and in this function you could handle the changes:
const handleSelectChange = (selectedVal) => console.log(selectedVal)
I recommend you using directly onChange and save it into a state:
1st:
Create state with the name you want:
const [selectValue, setSelectValue] = useState({});
2nd: Create options:
const options = [
{ label: "Tomate", value: 1 },
{ label: "Queso", value: 2 }
];
3rd: add method onChange in select and pass options:
const onChange = (ev) => {
setSelectValue(ev);
//console.log(ev);
console.log(selectValue);
};
<Select
id="dropdown-menu"
placeholder={"e"}
options={options}
onChange={onChange}
/>
I have created demo here:
https://codesandbox.io/s/ancient-pond-96h53?file=/src/App.js
Does Grommet have a built in solution to only allow single or multiple selections within a dataTable? I came up with this useState function that clears the array before setting it but it has an adverse reaction of forcing the user to click twice. If array > 1 user clicks which sets the select array to [] forcing the user to click again.
import React from "react";
import ReactDOM from "react-dom";
import {Grommet, DataTable, Text, Meter, Box} from 'grommet';
const GridExample = () => {
const [select, setSelect] = React.useState([])
function handleRowSelect(selection) {
console.log(`You picked ${selection}`);
if (selection.length > 1) {
setSelect(selection[selection.length - 1].toArray)
} else {
setSelect(selection)
}
}
return (
<Grommet>
<DataTable
select={select}
onSelect={handleRowSelect}
columns={[
{
property: 'name',
search: true,
header: <Text>Name</Text>,
primary: true,
},
{
property: 'percent',
search: true,
header: 'Complete',
render: datum => (
<Box pad={{vertical: 'xsmall'}}>
<Meter
values={[{value: datum.percent}]}
thickness="small"
size="small"
/>
</Box>
),
},
]}
data={[
{name: 'Alan', percent: 20},
{name: 'Bryan', percent: 30},
{name: 'Chris', percent: 40},
{name: 'Eric', percent: 80},
]}
/>
<Text>Selected: {select}</Text>
</Grommet>
)
}
export default GridExample;
ReactDOM.render(
<GridExample/>,
document.getElementById("root")
);
Update: Using Slice in the function fixes the double click.
function handleRowSelect(selection) {
if (selection.length > 1) {
setSelect(selection.slice(-1))
} else {
setSelect(selection)
}
}
I don't think there is a built-in solution (for grommet 2.17.5).
Though, you can always try to manipulate select and onSelect in different ways, for example, one way for that will be to add a condition to onSelect and disable selection option once one row had been selected already:
onSelect={select.length < 1 && handleRowSelect}
This will make sure only one row is selected at any given point.
If you'd like the users to be able to reset their decision, you can always add a reset button that clears the array of selection, and the checkboxes will be enabled again.
Using Material-UI 0.15.1, React 15.2.0
When I click on the SelectField dropdown I get an empty dropdown appearing with out the menu choices appearing. When I use hardcoded MenuItems in the SelectField I see the full menu without issue.
This does not appear to be an injectTapEventPlugin as I am importing it and calling it. My code is below:
render() {
var divStyle = {
fontSize: 16
};
var mymenuItems = [
{ payload: '1', text: 'one' },
{ payload: '2', text: 'two' },
{ payload: '3', text: 'three' },
{ payload: '4', text: 'four' },
{ payload: '5', text: 'five' },
];
return (
<div style={divStyle}>
<SelectField
value={this.state.selected}
onChange={this._onSelect}
floatingLabelText="Product"
menuItems={mymenuItems}>
</SelectField>
</div>
)
}
I am also getting a
Warning: Unknown props onItemTouchTap, disableAutoFocus,
onEscKeyDown on tag. Remove these props from the element
in the console when I click on the SelectField but I saw others had similar issues due to new React version it and it appears people think it should not affect my code (though it is very annoying)
Not sure why you are using menuItems, this property is from old material-ui versions.
But its simple to fix - based on your code you can just map through the array and return MenuItem elements..
Example:
<SelectField
value={this.state.selected}
onChange={this._onSelect}
floatingLabelText="Product">
{mymenuItems.map(x => <MenuItem key={x.payload} value={x.payload} primaryText={x.text} />)}
</SelectField>
I'd suggest you to check the examples on the material-ui docs
http://www.material-ui.com/#/components/select-field
Try putting this in your build:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
Make sure that function is ran before you render anything to page.
Reference: https://github.com/callemall/material-ui/issues/1011