Category: javascript

TLDR
Adding a web component in a pop-out window works as expected in Chrome / Edge. But in Firefox, before I add the web component to the dom it’s functioning, but just afterwards it reverts back to HTMLElement and the web component’s internal methods stop being recognized.

Here is a fiddle that is a simplified reproduction of this issue:
https://jsfiddle.net/2avd0un4/

Scenario
I have a two-screen app, the main window is basically an editor, and the second optional pop-up window is a preview. I’m using web components for most of the custom controls.

Problem
I mainly use Chrome / Edge, where this scenario works fine (web components are used as expected in the pop-up window). I did some testing in Firefox, and this issue was identified. I can programmatically create a web component, and check it’s working as expected. A shorthand for this is I check this.constructor.name from inside the component’s class when the component is connected. My example component is called “SayHello” which is the expected output.

In my real world project, the web component has a lot of internal methods which I use from inside the class like this.someFunction();.

The problem, in FireFox in the pop-out window, just after I add the web component to the dom with appendChild, the web component stops identifying as a SayHello and starts returning HTMLElement. Because of this, none of the internal methods in the class work, and the whole component basically stops functioning. Before it’s added to the dom it’s fine. But just after it reverts to HTMLElement.

Ask
Take a look at the Fiddle, it’s a simplified version of this. Trying it in Chrome / Edge will work, but it will fail and return HTMLElement in Firefox. Is there any way I can make this work?

I have two classes, A and B. I will only be setting the values of class A and I want class B variables to hold the same value as class A or have have access to all values of class A variables. In my case, class A and B should not be inherited logically. Is this possible without inheritance?.

In the below code, I have given an example where I need the value of only one variable and I could have passed the name as a method param. But, in my actual project I need to set the value of 20+ variables and it is not easy to pass around 20+ values to another class.

class B
{
    name:string
    age:number

    print()
    {
    console.log(this.name);
    }
}
const b = new B();
class A{
   name: string;
   age:number;

    printValues(){
     b.print()
    }
}
   const a = new A();
    a.name ="TOM"
    a.printValues() // Want to Print TOM

‘a’ array wasn’t affected.

const a = [1,2,3]
const b = [...a] // shallow copy

b[0] = 9

console.log(a) // [1,2,3]
console.log(b) // [9,2,3] results as expected


----------

const a = [{name:"John"},{name:"George"}];
const b = [...a];

b[0] = {name:"Oliver"}

console.log(a) // [ { name: 'John' }, { name: 'George' } ]
console.log(b); // [ { name: 'Oliver' }, { name: 'George' } ] results as expected


----------

const a = [{name:"John"},{name:"George"}];
const b = [...a];

b[0].age = 21

console.log(a); //[ { name: 'John', age: 21 }, { name: 'George' } ]
console.log(b); // [ { name: 'John', age: 21 }, { name: 'George' } ]

// why were affected ‘a’ array ?

Why were they both affected? It shows the same reference, but in the other 2 examples above, there was no change, only the ‘b’ array changed.

Working on a task where I need to search on Algolia Search

This was working fine for all alphabet text but gave an error for special characters like é

  const index = client.initIndex(indexName);
  return index
    .search("", {
      params: "filters=section_name:Design + Décor",
    })
    .then(({ hits }: any) => {
      console.log(hits)
    });

I am getting the following error

"filters: Unexpected token string(Décor) expected end of filter"

Any guidance towards this appreciated

Thanks in advance

I’m trying to monitor the stream metrics like encodekbps and other data available through requestRTCStats. However, when I invoke const report = await stream.requestRTCStats() I get that report === undefined.

According to the code I get on Chrome developer tools I see this happens when publish:

this.publish = t=>{
  this.logger.debug({
    msg: "publish"
  }),
  t.forEach((t=>{
    t && (this.setupStreamListener(t),
    t.streamType === Ve.AUDIO ? (this.audioStream = t,
      this.audioMuted = !t.mediaStreamTrack.enabled,
      this.info.audioMuted = this.audioMuted) : t.streamType === Ve.VIDEO && (this.videoStream = t,
        this.videoStopped = !t.mediaStreamTrack.enabled,
        this.info.videoStopped = this.videoStopped),
        t.setGetStats(this.publication.requestRTCStats))
      })),
      this.connection.emitStageState(this.audioMuted, this.videoStopped);
      const e = t.map((t=>this.toMediaTrackWithConfig(t)));
        this.publication.start(e)
},

That’s minimised code from amazon-ivs-web-broadcast package.

That happens after I:

const stage = new Stage(token, strategy);
// some logic
await stage.join();

I get my video and audio streamed just fine, but for some reason I’m not able to requestRTCStats, any ideas?

Hi I have an application for small company where only 20 employees work. I wanted to know how do I connect and trigger command from GUI script to my db. I have a two script per command one from ui and the other one connect the ui to the db. any leads would be helpful.

I have a two script per command one from ui and the other one connect the ui to the db. any leads would be helpful.

I have this situation where i have a button called dataExampleButton that pops-up a table, based on class.filterContent(), that stores the entire table on class.dataContent. When the button dataExampleButton is clicked, the pop-up works fine but table is empty, and only after i press the refresh button, the content is loaded.

The example is the following (using Java 6):

<p:commandButton value="dataExampleButton" id="dataExampleButtonid"
    onclick="dataExampleid.show();"
    action="#{class.filterContent()}">
</p:commandButton>

<p:dialog header="header" widgetVar="dataExampleid" modal="true" position="center" id="dataExampleid">
    <p:panel id="form">
            <fieldset>
                <p:panel id="dataExample" style="clear: both; padding: 0px;">
                    <p:dataTable styleClass="Style" var="valueType" id="tableExample"
                        value="#{class.dataContent}" paginator="true" rows="10" selection="#{class.valueType}">
                        <p:column headerText="header" id="Name">
                            <f:facet name="header">
                                <h:outputText value="#{'Value Name'}" />
                            </f:facet>
                            <h:outputText value="#{class.value}" />
                        </p:column>
                    </p:dataTable>
                </p:panel>
                <br style="clear: both;" />
                <p:panel style="text-align: right; padding-right: 15px;">
                    <p:commandButton value="Refresh" style="margin: 10px;" update="tableExample"/>
                </p:panel>
            </fieldset>
    </p:panel>
</p:dialog>

What i need to do is to click on the button dataExampleButton, and automatically bring up the content, without having to click on the refresh button.

Here’s what i got so far (surprisingly, is not working):

<p:commandButton value="dataExampleButton" id="dataExampleButtonid"
    onclick="refresh();"
    action="#{class.filterContent()}">
</p:commandButton>

<script type="text/javascript">     
    function refresh() {
        dataExampleid.show();
        tableExample.refresh();
    }
</script>

<p:dialog header="header" widgetVar="dataExampleid" modal="true" position="center" id="dataExampleid">
    <p:panel id="form">
            <fieldset>
                <p:panel id="dataExample" style="clear: both; padding: 0px;">
                    <p:dataTable styleClass="Style" var="valueType" id="tableExample"
                        value="#{class.dataContent}" paginator="true" rows="10" selection="#{class.valueType}">
                        <p:column headerText="header" id="Name">
                            <f:facet name="header">
                                <h:outputText value="#{'Value Name'}" />
                            </f:facet>
                            <h:outputText value="#{class.value}" />
                        </p:column>
                    </p:dataTable>
                </p:panel>
                <br style="clear: both;" />
            </fieldset>
    </p:panel>
</p:dialog>

Any ideas of what i’m messing up?

I am creating a collage where you click around, and the pictures pop up where clicked. It looks how I want but now the nav bar doesn’t work as I can’t click it. Also, since I am using img in css for this it affects the rest of my website.

const images = [
  "collage1.webp", "collage2.jpg", "collage3.jpg", "collage4.jpg", "collage5.jpg", "collage6.jpg"
]

let i = 0


function placeImage(x, y) {

  const nextImage = images[i]


  const img = document.createElement("img")
  img.setAttribute("src", nextImage)
  img.style.left = x + "px"
  img.style.top = y + "px"
  img.style.transform = "translate(-50%, -50%) scale(0.5) rotate(" + (Math.random() * 20 - 10) + "deg)"
  document.body.appendChild(img)


  i = i + 1

  if (i >= images.length) {
    i = 0
  }
}

document.addEventListener("click", function(event) {
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

document.addEventListener("touchend", function(event) {
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  background-image: url("background3.jpg");
}

.topnav {
  overflow: hidden;
  /*background-color: #214a63;*/
  /*#0A1128*/
  /*display:flex;*/
  justify-content: left;
  align-items: left;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4db1f0;
  color: white;
}


/*test for favicon menu item*/

.topnav a.split {
  float: right;
  padding: 14px 16px;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

#wrap {
  min-height: 100%;
}

#wrapper {
  width: 600px;
  margin: 80px auto;
  text-align: center;
}

h1 {
  text-align: center;
}


/*
img {
  width: 400px;
  height: auto;
}*/

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}


/*for floating selfie*/

.flier.self {
  width: 400px;
  height: auto;
}


/*for linked in logo*/

.linkedin {
  height: 40px;
  width: auto;
}


/* for the about me page (looks good but gets rid of linked in image and cant click tabs)*/

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}

img {
  position: absolute;
  top: 500px;
  left: 400px;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5;
}

<body>
  <div class="topnav">
    <a href="index.html">Home</a>
    <a class="active" href="#aboutMe">About Me</a>
    <a href="vacation.html">Vacation Spots</a>
    <a href="eightBall.html">Magic Eight Ball</a>
    <a href="dog.html">My Dog</a>
    <a href="linked in goes here" target="_blank" class="split"> <img src="LI-In-Bug.png" class="linkedin"></a>
  </div>

  <h1>About Me</h1>

  <script src="collage.js"></script>

</body>

Trying to learn React Native / Expo.

Have an existing Parse server, need to connect to it.

Seem to be able to initialize but not access objects.

Example code:

export const initializeParseClient = () => {
  // Initialize client; this works
  Parse.initialize("...", "...");
  Parse.serverURL = "...";  

  // try accessing an object and examining a field; doesn't work
  const query = new    Parse.Query("DoctorInfo");
  try {
      //set query to get the object with the given ID
      query.equalTo("objectId", docId);
      //execute the query and return the result
      const doctorInfo = await query.first();
      const practice = doctorInfo.get("Practice");
      console.log(`Practice: ${practice}`);
      return practice; 
  } catch (error) {
      console.error('Error fetching DoctorInfo:', error);
      throw error;
  }
};

When I run this from the MacOS Terminal in Expo Go, I get this error:

Error fetching DoctorInfo: [Error: unauthorized]

…any help?

See the following code as an example:

var activeTab = function(callBack)
{
    let queryOptions = {lastFocusedWindow:true, active:true};
    chrome.tabs.query(queryOptions, function(tabs)
    {
        for (var i=0; i<tabs.length; i++)
            callBack(tabs[i]);

        // should be same as calling callBack(tabs[0]);
    });
};

activeTab(cb => chrome.tabs.sendMessage(cb.id, {msg:content}));

versus the official example:

  async function activeTab()
  {
    let queryOptions = {lastFocusedWindow:true, active:true};
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
  }

  activeTab().then((cb) => { chrome.tabs.sendMessage(cb.id, {msg:content}); });

Just wondering if there’s any issues doing it one way vs the other way …

(I’ve also seen it done with promises)

I have tried the await method before and I’m pretty sure I’ve run into an issue
but it might’ve been only in manifest v2,
where there was no matching signature calling tabs.query …

I know the 1st example seems to work pretty well, and callback looks simpler to me 🙂

Why we need a concept of return a function from a function and passing a function to the function?

I thought that this concept can be ignored

I have a simple project. In that project, I have a drawer that works with translateX. My problem is that when I open that drawer, my main content goes outside the page.

this issue is showed in these two pictures

I want the content not to go outside the page when the drawer is opened, but I don’t know the best way to handle this.

The code is like below

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid lightcoral;
        }

        .hamburger {
            cursor: pointer;
        }

        .contents {
            display: flex;
            gap: 10px;
        }

        .drawerContainer {
            position: relative;
        }

        .drawer {
            position: absolute;
            background-color: lightcoral;
            transform: translateX(-100%);
            transition: all 0.2s ease-in-out;
            padding: 20px;
            width: 320px;
        }

        .drawer.open {
            transform: translateX(0);
        }

        .content {
            transition: all 0.2s ease-in-out;
        }

        .transformContent {
            transform: translateX(320px);
        }
    </style>
</head>
<body>
<header class="header">
    <div class="hamburger">
        Hamburger Menu
    </div>
    <div>
        Other content
    </div>
</header>
<div class="contents">
    <div class="drawerContainer">
        <div class="drawer">
            This is Drawer
        </div>
    </div>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
            ipsum
            maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
            Ab
            accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
            dolorum,
            ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
            placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
            voluptatum?
            Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
            odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
            est
            ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
            quibusdam
            quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
            inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
            architecto
            asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
            minus
            mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
            repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
            cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
            Accusantium
            amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
            maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
            voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
            quasi,
            quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
            recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
            voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
            iure
            laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
            reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
            id
            maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
            atque
            consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
            maxime
            odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
            magni
            minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
            cupiditate
            debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
            nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
            officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
            fugiat
            fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
            quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
            praesentium
            quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
            dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
            dolore
            ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
            quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
            blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
            nulla
            numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
            voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
            consequatur
            deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
            Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
            quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
            perferendis
            provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
            est
            eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
            provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
            eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
            ratione
            tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
            explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
            Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
            nam
            numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
            adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
            praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
            architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
            porro
            quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
            incidunt
            labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
            culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
            impedit
            laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
            reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
            error
            impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
            praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
            fugiat
            harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
            rem
            sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
            sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
            ullam!
            Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
            excepturi
            facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
            Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
            minus
            modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
            reprehenderit
            saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
            dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
            mollitia
            nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
            praesentium sit!
        </div>
    </div>
</div>
</body>

<script>
    const menuButton = document.querySelector('.hamburger');
    const drawer = document.querySelector('.drawer');
    const mainContent = document.querySelector('.content');

    menuButton.addEventListener('click', () => {
        drawer.classList.toggle('open');

        if (drawer.classList.contains('open')) {
            mainContent.classList.add('transformContent');
        } else {
            mainContent.classList.remove('transformContent');
        }
    });

</script>
</html>

I am getting the below error whilst running a Firestore query.

[firestore/invalid-argument] Client specified an invalid argument.
Note that this differs from failed-precondition. invalid-argument
indicates arguments that are problematic regardless of the state of
the system (e.g., an invalid field name).

Here is my query;

export async function getFilteredData(category, filters, city_id) {
  let venues = [];
  let lastVenue;
  let query = firestore()
    .collection("venues")
    .where("active", "==", true)
    .where("city_id", "==", city_id);

  if (category) {
    query = query.where("category.id", "==", category);
  }

  if (filters?.subcategories.length > 0) {
    query = query.where("subcategory.id", "in", filters.subcategories);
  }

  if (filters?.districts.length > 0) {
    query = query.where("district.id", "in", filters.districts);
  }

  if (filters?.prices.length > 0) {
    console.log(filters.prices);
    query = query.where("price", "in", filters.prices);
  }

  if (filters?.tags.length > 0) {
    query = query.where("tags", "array-contains-any", filters.tags);
  }

  if (filters?.order) {
    query = query.orderBy(filters.order, "desc");
  } else {
    query = query.orderBy("created_at", "desc");
  }

  await query
    .limit(20)
    .get()
    .then((snapshot) => {
      lastVenue = snapshot.docs[snapshot.docs.length - 1];
      snapshot.forEach((doc) => {
        venues.push({ id: doc.id, ...doc.data() });
      });
    });

  return { venues, lastVenue };
}

This error is only returned when subcategories, districts or prices arrays total more than 12? – Can’t find in the documentation where this limitation is?

When we run ( /usr/local/mysql/bin/mysql -u root -p) this code on vs code terminal to connect MySQL to our backend then this error is show.

/usr/local/mysql/bin/mysql : The term ‘/usr/local/mysql/bin/mysql’ is not recognized
as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and
try again.
At line:1 char:1

• /usr/local/mysql/bin/mysql -u root -p

•   + CategoryInfo          : ObjectNotFound: (/usr/local/mysql/bin/mysql:String) [],   
  CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
  
  

Solve the problem or Give me solution of it.

I was wondering if there was any way to have the mui treeview available as the option in the mui autocomplete dropdown. I looked around a lot but could not find any references or examples for it, Any help would be greatly appreciated.

Here is an image for reference:
How it should come out

Using the treeview directly in the renderOptions does not seem to work.