Fix parent option passing to ajax endpoint

changelog.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 1.3.0 - 2024-11-14
+
+- Fixed selected parent option not being passed correctly to the ajax endpoint
+- Added Custom stylesheet to help dark mode conflicts
+
 ## 1.2.3 - 2024-11-06
 
 - Updated dist bundle

composer.json

@@ -1,7 +1,7 @@
 {
 	"name": "razorcreations/ajax-field",
 	"description": "A searchable AJAX powered field for Laravel Nova 3 and 4.",
-	"version": "1.2.3",
+	"version": "1.3.0",
 	"authors": [
 		{
 			"name": "Ross Cooper",

dist/css/field.css

@@ -1 +1 @@
-
+.dark .vs--single .vs__selected{color:#0f0!important}

dist/mix-manifest.json

@@ -1,3 +1,4 @@
 {
-    "/js/field.js": "/js/field.js"
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
 }

resources/css/field.css

@@ -1 +1,4 @@
 /* Nova Field CSS */
+.dark .vs--single .vs__selected {
+    color: #0f0!important;;
+}

resources/js/components/FormField.vue

@@ -51,30 +51,6 @@ export default {
 	},
 
 	computed: {
-		parentComponent() {
-			if (!this.field.parent_field) {
-				return false;
-			}
-
-			let targetField = this.field.parent_field;
-			let currentField = this.field.attribute;
-
-			// If component is inside a flexible, key is prefixed with an id
-			if (currentField.indexOf('__')) {
-				targetField = currentField.substr(0, currentField.indexOf('__')) + '__' + targetField;
-			}
-
-			if (typeof this.$parent.$children === 'undefined') {
-				return;
-			}
-
-			//  Find the component the parent value references
-			return this.$parent.$children.find(component => {
-				return component.field !== undefined
-					&& component.field.attribute == targetField;
-			})
-		},
-
 		availableOptions() {
 			return _.uniqBy(this.options.concat(this.selectedOptions), 'value');
 		},
@@ -94,6 +70,45 @@ export default {
 	},
 
 	methods: {
+		findParentField() {
+			let parentFieldTarget = this.field.parent_field;
+			let currentField = this.field.attribute;
+
+			// If component is inside a flexible, key is prefixed with an id taken from currentField
+			if (currentField.indexOf('__') > -1) {
+				parentFieldTarget = currentField.substr(0, currentField.indexOf('__')) + '__' + parentFieldTarget;
+			}
+
+			// Make some attempts to find the parent field
+			const parentField = document.querySelector(`.form-input#${parentFieldTarget}`);
+
+			if (parentField) {
+				return parentField;
+			}
+
+			return null;
+		},
+
+		observeParentField() {
+			const targetInput = this.findParentField();
+			if (!targetInput) {
+				console.warn(`Input field with id ${this.field.parent_field} not found`);
+				return;
+			}
+
+			// Set initial value
+			this.parentVal = targetInput.value;
+
+			// Event listener to detect input changes
+			const updateParentValue = (event) => {
+				this.parentVal = event.target.value;
+				this.options = [];
+				this.loadInitialOptions();
+			};
+
+			targetInput.addEventListener('input', updateParentValue);
+		},
+
 		prepareField() {
 			//Check whether any filterable data was set, otherwise stay true
 			if (typeof this.field.filterable !== 'undefined') {

version.txt

@@ -1 +1 @@
-1.2.3
+1.3.0

webpack.mix.js

@@ -2,6 +2,7 @@ let mix = require('laravel-mix')
 
 mix.setPublicPath('dist')
 	.js('resources/js/field.js', 'js')
+	.css('resources/css/field.css', 'css')
 	.vue({version: 3})
 	.webpackConfig({
 		externals: {