Comments (4)
Hello @Fn4ch , could you please provide system info? What browser do you use?
I can't reproduce it. Tried on Chrome, Edge and Firefox.
from fluentui.
Hello @Fn4ch , could you please provide system info? What browser do you use? I can't reproduce it. Tried on Chrome, Edge and Firefox.
Im using Chrome 125.0.6422.78, and i got this problem everywhere
SpinButton example:
from fluentui.
Hello @Fn4ch , could you please provide system info? What browser do you use? I can't reproduce it. Tried on Chrome, Edge and Firefox. ![image](https://private-user-images.githubusercontent.com/11574680/332428249-f3c60d66-ab5c-4c58-91d0-27afabe3b671.png?
Could you please send codesandbox or codepen example of how you use the component? Because it's not reproducible on our side
from fluentui.
deps:
react and etc
"@fluentui/react-components": "^9.53.0",
"@fluentui/react-icons": "^2.0.237",
"@storybook/react": "^8.0.9",
"@storybook/react-vite": "^8.0.9",
This component (Combobox) is shown through the storybook
My component:
import * as React from "react"
import { useState, useEffect } from "react"
import {
Combobox,
makeStyles,
shorthands,
useId,
useComboboxFilter
} from "@fluentui/react-components"
import type { ComboboxProps } from "@fluentui/react-components"
import { MultipleComboboxProps } from "@/shared/models"
const useStyles = makeStyles({
root: {
display: "grid",
gridTemplateRows: "repeat(1fr)",
justifyItems: "start",
...shorthands.gap("2px"),
maxWidth: "400px",
},
})
const MultipleCombobox = (props: MultipleComboboxProps) => {
const {
options = [],
placeholder = '',
labelTitle = '',
selectedValue = [],
onSelectOptionsChange
} = props
const comboId = useId("combo-source")
const selectedListId = `${comboId}-selection`
const [value, setValue] = useState('')
const styles = useStyles()
const onSelect: ComboboxProps["onOptionSelect"] = (event, data) => {
onSelectOptionsChange(data.selectedOptions)
setValue("")
}
useEffect(() => {
if(selectedValue.length === 0){
setValue('')
}
}, [selectedValue])
const children = useComboboxFilter(value, options, {
noOptionsMessage: "Nothing was found for your request",
})
const onFocus = () => {
setValue("")
}
const onBlur = () => {
setValue(selectedValue.join(", "))
}
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value)
}
useEffect(() => {
const comboboxes = document.querySelectorAll('[role="combobox"]')
comboboxes.forEach(c => c.classList.remove('f1ub7u0d'))
}, [])
return (
<div className={styles.root}>
<label id={comboId}
style={{fontWeight: 600}}
>{labelTitle}</label>
<Combobox
aria-labelledby={comboId}
multiselect
placeholder={placeholder}
selectedOptions={selectedValue}
value={value}
onBlur={onBlur}
onChange={onChange}
onFocus={onFocus}
onOptionSelect={onSelect}
{...props}
>
{children}
</Combobox>
</div>
)
}
export default MultipleCombobox
Im using useEffect, to delete style: allign-self: stretch
from fluentui.
Related Issues (20)
- [Bug]: 'Single pointer action alternative' Not provided for the draggable control between the column headers
- [Bug]: V9 Combobox doesn't keep its state when multiple comboboxes are on the page HOT 2
- [Bug]: Tab is not working while fluent data grid row in edit mode with controls
- [Bug]: DialogModalType is not exportable
- [Bug]: Popover does not reposition correctly on zoom
- [Bug]: Unable to upgrade fluentUI react-components and react-icons HOT 2
- [Bug]: Using Toolbar is making it not possible to use tab key in monaco editor
- [Bug]: "partitionAvatarGroupItems" does not respect items sorting when content overflows
- [Bug]: Card component - If focusMode = 'tab-only', and the Card has an onClick event handler, then `focusMode` regresses to `no-tab` behaviour HOT 1
- [Bug]: React 19, Accessing element.ref is no longer supported
- Investigate `react-compiler` eslint violations
- CardHeader misaligned when description missing or undefined[Bug]:
- [Bug]: Popover, Dropdown and Combobox do not close on parent scroll or resize
- [Bug]: Can't use @fluentui/web-components with jest tests
- [Calendar Compat]: Focus border gets cut off in month selection
- [Bug]: Focus indicator gets cut off in CalendarCompat component
- Disabled styles on subtle buttons is not applied correctly HOT 1
- [Recipes]: Cleanup recipes-react-components
- [Bug]: Accordion does not return to initial state of all items being in the closed state HOT 2
- [Bug]: Scroll jump when navigating nested tree using keyboard
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui.