I want to implement an AutoComplete field using Material UI, where the size of the field resizes according to the option selected.
When the option selected does not occupy the entire field, I would like the size of the field to reduce. And if the option selected is longer than what the field can accommodate, I would like the field size to increase to display the entire option
How can this be implemented in Material UI?
The input width can be changed by creating a State variable.
const [inputWidth, setInputWidth] = useState(DEFAULT_INPUT_WIDTH);
where
const DEFAULT_INPUT_WIDTH = 90;
can be set to any default value. Ex: 90
In addition, create a const for the font size
const FONT_SIZE = 9;
The Props taken by autocomplete take a width value for the TextField. Set the width of the field in the style attribute.
let autocompleteInputProps = {
label: 'ABC',
style: { width: `${inputWidth}px`},
};
Whichever function that handles the select change will include the following code
const handleSelectChange = (value) => {
if (value.code.toString().length !== 1){
setInputWidth(DEFAULT_INPUT_WIDTH + value.toString().length * FONT_SIZE)
} else {
setInputWidth(DEFAULT_INPUT_WIDTH)
}
};
This explains the same in TextField.
Related
I have a MUI TextField component I am wanting to use as a kind of copy and paste board in the admin area of my app. Sometimes an admin person needs to use the same phrases over and over and so there is a dropdown list of commonly used phrases which can be selected and then they appear in the TextField, or the user can freetype something, For example, they may choose the phrase 'Only these are required' from a dropdown, which then appears in the TextField, but then they also free type on the next line, 'Each day we see 100 of these' I want the initial phrase to stay there and the new one to be added. so the TextField would now look like,
Only these are required
Each day we see 100 of these
My current implementation involved keeping a state variable 'text' which is updated and used to set the value in the TextField. But it doesn't work as I realised when I use 'setState' to update it, it is updating it with the whole value of the textField which includes anything previous written and not only the new value which is free typed.
Currently I have
const [text, setText] = useState(['']); //Array of strings to show in the TextField
//Clear the textField of all entries.
function clearTemplateBox() {
setText(['']);
}
//Change function when selecting a string from the dropdown menu - This for some reason works fine, BUT add a , at the start of each new line? not a clue why.
const handleChange = (event: SelectChangeEvent) => {
const { value } = event.target
setTemplate(event.target.value as string);
let newValue = value + '\n\n';
setText(prevArray => [...prevArray, newValue])
};
//When handling free typed input, as event.target.value contains the whole content of the TextField, the whole content is being added to my array text, here I just want to add a new string that is added to the string[]
function handleManualInput( event: React.ChangeEvent<HTMLInputElement>) : void {
setText(prevText => [...prevText, event.target.value]);
}
So if the TextField already contains 4 lines of text and I then freetype 'HelloWorld' I want HelloWorld to be added to the string[] holding the previous 4 lines. I thought it may be possible to somehow compare the string[] to the new string from the event.target.value, but cannot find anything like this.
TextField Code as requested
<TextField
id='template-text-area'
ref={ref}
aria-label="minimum height"
multiline={true}
rows={28}
style={{ width: '95%', border: '2px solid lightgrey' }}
value={text}
onChange={handleManualInput}
/>
I am testing the DataTable component of PrimeReact. Just testing because I can't yet decide which component library to use.
I'm using editMode="cell" and the onCellEditComplete callback of DataTable when modifying a field and with the rowData prop I modify another field (another cell). It seems to modify it but when editing that cell the input text doesn't update properly.
Example:
const onCellEditComplete = (e) => {
let { rowData, newValue, value, field } = e;
if (field=="code") { //code is the modified field/cell
rowData["code2"]="pref"+rowData["code"]; //an expression
//'code2' is the other field to update based en 'code'
}
// ...
}
When trying to edit the cell of 'code2' field, the input doesn't update. It shows the previous value.
Your rowData should look like this: rowData.code2="pref"+rowData.code
I am trying to customize the search filter in React Ant design table, typically ant design allows customizable dropdown for search filter, for example. But the requirement is to show permanent search boxes under the columns similar to the react table by Tanner, rather than a dropdown.
I tried to pass a ReactNode in title prop for columns, but it creates weird onClick side effects. Is there a way to customize the header?
Making it simple, you can create the first row as:
getFieldsForEachColumn = (columns) => {
const row = {};
columns.forEach((element, index) => {
if (element.searchable) {
const inputFieldCell = (
<Input onChange={(e) => this.handleOnChange(e.target.value, element.title)}/>
);
row[Object.keys(data[0])[index + 1]] = inputFieldCell
} else {
row[Object.keys(data[0])[index + 1]] = null;
}
});
return row;
};
And then when you are mapping the array data, just push this returned in the started of that array.
Conditional row styling on ag grid where I want to do rowstyle on user choice of cell value
gridoptions.getRowStyle = function(params) {
if (params.node.data === 'cell value typed by user in external/custom component i.e outside grid') {
return { 'background': value selected by user in cutom componet outside grid };
}
}
#sandeep's answer works perfectly. I just want to chime in another way to solve the problem which is to use context. context is just another javascript object which contains any information that you want to share within AgGrid. The data will be accessible in most AgGrid callbacks for example cell renderers, editors's render callback and in your case getRowStyle callback
const sickDays = // data from external component
const color = // data from external component
<AgGridReact
getRowStyle={(params) => {
const { styles, data } = params.context;
if (params.node.data["sickDays"] === data.sickDays) {
return { backgroundColor: styles.color };
}
return null;
}}
context={{
data: { sickDays },
styles: { color }
}}
/>
Live Demo
here is a plunkr which should give you idea to solve the problem. since i don't know much about your component hence i used two input boxes with button to set background color to row but you can use complex styles as well.
I am using api.redrawRows() since the operation we are performing needs to work on row.
This is a Framer/React question:
I have a bunch of text fields in a "page" component and I want the focus to shift on every "page" change.
There's a button controlling the pager but no trigger (onPageChange / onClick) is changing the attribute of "focus" on the relevant text input.
This is the code I tried using to change the value of foc2 (the focus attribute) to true
When I manually change it to true it works, but in this case it doesn't
export function Page(): Override {
return {
currentPage: state.page,
onChangePage: (index) => {
state.page = index
state.foc2 = true
},
}
}
Do you have more complete code you could share?
Make sure you set the state to the index of the current focused input, and use that to change the currentPage property.
Happy to help if you send more context, you can also find more help in Framer's community at https://framer.com/r/discord