It's my first time there so I hope I'll be clear !
I'm using React-admin for a project and I've got a strange issue. I'm using a modal and in there, there are two fields, one to select a warehouse (for my project) and the second that is parsing location based on the warehouse selected. The problem is that when I select a location once the warehouse is chosen, a second query is called without filter (but just after choosing a warehouse there is the good query).
Example: I choose "WHBOB", the query is filtering WHBOB, and when I click to the location, a second query is passing without filter. I think, the state that I'm using is resetting the filter but I don't know how to fix it ...
Code :
import React, { useState } from 'react'
import { AutocompleteInput, ReferenceInput, SelectInput } from 'react-admin'
import { Box, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import ProductReceptionInputs from 'components/ProductReceptionInputs'
const useSmallBodyStyles = makeStyles(theme => ({
root: {
fontWeight: '600',
color: theme.palette.secondary.contrastText
}
})
)
const ProductLogisticInputs = (props) => {
const classes = useSmallBodyStyles()
const [selectedOption, setSelectedOption] = useState()
function handleChange (evt) {
setSelectedOption(evt.target.value)
}
return (
<>
<Typography variant='body2' color='secondary.contrastText' className={classes.root}>Atelier</Typography>
<Box display='flex' width='100%'>
<Box width='320px'>
<SelectInput
label='Atelier' source='warehouse'
choices={[
{ id: 'WHBOB', name: 'Bobigny' },
{ id: 'WHLIL', name: 'Lille' },
{ id: 'WHLYO', name: 'Lyon' }
]} alwaysOn emptyText='Atelier' fullWidth
InputProps={{ disableUnderline: true }}
onChange={handleChange}
/>
</Box>
<Box width='320px' marginLeft='24px'>
<ReferenceInput
label='Emplacement'
reference='location'
source='location'
filter={{ ancestor_path: selectedOption }}
alwaysOn
>
<AutocompleteInput
optionValue='id'
optionText='name'
options={{ disabled: !selectedOption }}
fullWidth
/>
</ReferenceInput>
</Box>
</Box>
<Typography variant='body2' color='secondary.contrastText' className={classes.root}>Reception</Typography>
<ProductReceptionInputs />
</>
)
}
export default ProductLogisticInputs
If you need more info do not hesitate to ask !
Hope I was clear :)