**Describe the bug**
When we write a native query by connecting a database tabl…e, we can use variable option inside our query. We can connect it to a variable by selecting values from dropdown of Variable type (ex: Text, Number, Field Filter). When I select the Field Filter to map this variable with a table field, got error. Also, if there is any previous query which is already connected to a table field with `Field Filter` variable type, if I want to change that field, error occured.
**Logs**
`Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')
at s.value (NativeQueryEditor.jsx:442:29)
at s.value (NativeQueryEditor.jsx:457:12)
at c (debounce.js:17:37)
react-dom.production.min.js:49 Uncaught Error: Minified React error #188; visit https://reactjs.org/docs/error-decoder.html?invariant=188 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at react-dom.production.min.js:49:67
at it (react-dom.production.min.js:50:217)
at t.findDOMNode (react-dom.production.min.js:289:336)
at h.value (ExplicitSize.jsx:39:25)
at ExplicitSize.jsx:126:30
at c (debounce.js:17:37)
VM1943 react_devtools_backend.js:2655 TypeError: Cannot read properties of null (reading 'toLowerCase')
at Object.humanize (inflection.js:828:17)
at s (strings.ts:34:10)
at i.value (Schema.ts:18:21)
at DataSelectorSchemaPicker.tsx:33:22
at Array.map (<anonymous>)
at Ke (DataSelectorSchemaPicker.tsx:32:22)
at Jo (react-dom.production.min.js:153:146)
at ya (react-dom.production.min.js:261:496)
at mc (react-dom.production.min.js:246:265)
at bc (react-dom.production.min.js:246:194)`
**To Reproduce**
1. Make a native query with a variable
2. Go to variable type to connect the variable with table field
3. Click on drop down & select field filter
5. See error
**Expected behavior**
Should work without error.
**Screenshots/videos**
**Information about your Metabase Installation:**
`{
"browser-info": {
"language": "en-US",
"platform": "Linux x86_64",
"userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36",
"vendor": "Google Inc."
},
"system-info": {
"file.encoding": "UTF-8",
"java.runtime.name": "OpenJDK Runtime Environment",
"java.runtime.version": "11.0.18+10",
"java.vendor": "Eclipse Adoptium",
"java.vendor.url": "https://adoptium.net/",
"java.version": "11.0.18",
"java.vm.name": "OpenJDK 64-Bit Server VM",
"java.vm.version": "11.0.18+10",
"os.name": "Linux",
"os.version": "5.15.0-46-generic",
"user.language": "en",
"user.timezone": "GMT"
},
"metabase-info": {
"databases": [
"h2",
"mongo"
],
"hosting-env": "unknown",
"application-database": "h2",
"application-database-details": {
"database": {
"name": "H2",
"version": "2.1.212 (2022-04-09)"
},
"jdbc-driver": {
"name": "H2 JDBC Driver",
"version": "2.1.212 (2022-04-09)"
}
},
"run-mode": "prod",
"version": {
"date": "2023-03-28",
"tag": "v0.46.0",
"branch": "release-x.46.x",
"hash": "0ca7df3"
},
"settings": {
"report-timezone": null
}
}
}`
**Severity**
It's blocking development with metabase, kinda stuck on it.
EDIT, repro steps:
- using 46, connect Mongo or MySQL sample databases
- New->SQL question
- in MySQL:
```
select * from people where {{ one }} and {{ two }}
```
make both filters as field filters, when connecting the second the FE will blow up
- in MongoDB, selecting the people collection:
```
[
{
"$match": {
"$and": [
{
"state": {{ one }}
},
{
"source": {{ two }}
}
]
}
},
{
"$project": {
"_id": "$_id",
"address": "$address",
"email": "$email",
"password": "$password",
"name": "$name",
"city": "$city",
"longitude": "$longitude",
"state": "$state",
"source": "$source",
"birth_date": "$birth_date",
"zip": "$zip",
"id": "$id",
"latitude": "$latitude",
"created_at": "$created_at"
}
},
{
"$limit": 1048575
}
]
```
